<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport"
          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../Styles/base.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<p>平或垂直地停靠在窗口的边缘。</p>

<p><span id="filepos0001944949"></span></p>

<p>工具栏按钮</p>

<p>工具栏的出现带来了图标按钮，它是按钮和图标之间一次愉快的联姻。作为功能的视觉助 记符，图标按钮是优秀的。但新手用户可能难以理解图标的意义，因为它们不是为新手用户准 备的。</p>

<p>由于工具栏是主要用来为常用功能提供快速访问的，因此必须让有经验的用户能够快速地 识别它们。符号具有的图形表意的外在形象，比文本更适合担当这种角色。图标按钮还具备按 钮的受范特征（ pliancy),
    以及能够快速识别的图像。运用图标按钮，我们可以把许多功能挤到 一个很小的空间，但它最大的优点也是其最大的不足，即图标本身。</p>

<p>许多设计师认为，他们设计的图标按钮必须要具备视觉隐喻，这样才能向新手用户传达足 够的信息。这是一种唐吉坷德式的探索，不仅反映了对工具栏的误解，而且反映了对隐喻魔法 徒劳的希望。这一点，我们在第 13
    章已经讨论过了：这种隐喻根本就不存在。</p>

<p>图标按钮中的图像并不需要告诉用户其用途，只需要容易辨识即可，用户通过其他方 式会知道它的用途。这里最有效的方法之一（我们前面曾谈论过），便是将工具栏上用到的
    图标，也显示在其对应功能的菜单项的右侧。这样，菜单固有的教学作用范围就扩展到了 工具栏控件上。</p>

<p><span id="filepos0001946917"></span></p>

<p>工具提示</p>

<p>图标同时配以图和文字，这似乎是个好主意。这一观点，不仅在逻辑上有过争议，而且也 有过先例。 Macintosh 桌面上最初的图标就有文本小标题，一些网页浏览器上也有这种做法。图
    标对快速分类有用，但除此以外，还需要文本告诉我们图标的确切用途是什么。</p>

<p>同时用图和文本的问题，在于要消耗掉更多的宝贵像素，一般来说，屏幕空间都太宝贵了， 不允许我们这样做。有些设计师试图同时满足两种用户的不同需求：一种用户希望在温和宽松
    的环境下学习；另一种用户十分了解常用的功能，但偶尔需要简短的提示。此时，工具提示 (tooltips) 是弥合这两种用户需求之间鸿沟的有效方式。</p>

<p>工具提示是一种聪明而有效的用户界面习惯用法之一，它在无须使用文本标签的前提下， 让图标按钮具备了教学能力（图丨 8-7) 。本质上，工具提示在图标的旁边弹出了一个暂时的、
    很小的窗口，里面包含了一个文本标签。工具提示的巧妙之处，在于它延时出现的时机非常好。 当使用者的鼠标放在某个功能上大约 1 秒左右的时间，它才会显示帮助信息。这个时间也足够</p>

<blockquote>
    371
</blockquote>
<p>一个使用者点击并选取该功能，而不会触发提示，从而保证了鼠标经过工具栏操作时，工具提 示不会突然弹出来干扰到使用者，也意味着当使用者忘记某个不常用的功能时，只要花上半秒 左右的时间就可以知道。</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" colspan="5" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;

            <p align="center" height="0pt" width="0pt">Paragraph</p>

            <blockquote>
                <font size="5">三</font> 1 <font size="5">：</font>

            </blockquote>
            </blockquote><br/>
            <br/>

            <p align="right" height="0pt" width="0pt">j <font size="5">丨廷</font></p>

            <blockquote>
                [1

            </blockquote>
            </blockquote><br/>
            <br/>

            <blockquote>
                ■"V

            </blockquote>
            <p>il —</p>

            <p>H^Numbered List^</p>

            <p>rH <font size="5">••卜</font></p>

            <p><i>\z〇\</i></p>

            <p>图18-7微软Word工具提示可以帮助提示那些忘记了图标含义的使用者，而无须占用较多屏幕空间。</p>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="5" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p>起初，工具提示仅包含一个单词或一个极简的短语，用来描述鼠标悬停下方图标的功能。 不过，微软 Office2007 开始在工具提示中放入了 “ 轻量级的 ” 帮助信息。这种做法，借助了
    其他帮助机制，并兼顾了工具提示对周围环境的敏感性，因此进一步减少了学习应用所需的</p>

<p><img align="baseline" alt="" height="71" src="../Images/Image00039.jpg" width="55"/></p>

<p>工作量。</p>

<p>设计原则</p>

<p>所有工具栏和图标控件都应该使用工具提示。</p>

<p>工具提示令中级用户可以更加容易地访问工具栏上的控件，其结果是，工具栏成为了独占 式应用中调用命令的一种主要习惯用法。这样，菜单退化到了后台，成为新手用户学习的场所 ,
    也成为调用高级和偶尔使用功能的地方。这种以图标按钮为主、菜单为辅的自然秩序，可以让 独占式应用更加易用。实际上，在微软 Office2007 中，我们看到了这种趋势在继续，具有视觉 化、文本化表现力的标签工具栏和彩条（
    ribbon) 控件一起取代了菜单。我们将在本章的后面 讨论彩条。</p>

<p><span id="filepos0001954784"></span></p>

<p>禁用工具栏控件</p>

<p>工具栏控件如果不适用于当前选择，应当被禁用，不要给用户模棱两可的感觉。例如，如 果图标按钮禁止按下，控件本身也应该变成灰色，将禁用状态明显地标示出来。</p>

<p>一些应用干脆让禁用的工具栏彻底消失，但这是不受欢迎的。用户记得工具栏所在的位置 , 如果某些图标消失了，受到一贯信任的工具栏变成易变而暂时性的，会让新手用户大惊失色， 甚至比较有经验的用户也会迷惑不解。<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>工具 <font size="5">_</font> 新用 <font size="5">@</font></p>

<p>当人们开始意识到工具栏不仅仅是菜单的快捷方式后，它的成长潜力更明显了。设计者开 始意识到，没有理由将工具栏控件限定为只能用图标按钮。不久，设计者们幵始为工具栏发明
    新的习惯用法。随着这些新用法的出现，工具栏真正使自己成为一个主要的控件工具。</p>

<p>在图标按钮之后，第二个在工具栏上落户的是组合框，例如很多应用软件中的字体、样式、 字号的控件等。这些选择控件落户在工具栏中是极其自然的，它们和下拉菜单提供相同的功能。
    而且还显示了当前选择的属性，即当前的字体、样式、字号。这个习惯用法，用户付出较少的 努力，却可以得到更多的信息。</p>

<p>组合框加入了工具栏，这创造了先例，之后工具栏中的各类新型习惯用法相继出现，如前 面的图 18-6 所列出的那些。</p>

<p>这些控件变体扩展了工具栏的用途。当工具栏首次出现时，它只提供了对常用功能的快速 访问。随着发展，工具栏控件开始反映应用中数据的状态。与以往只是简单将文本从无格式转 变为斜体的图标按钮不同 ,
    现在的图标按钮可以显示当前选中的文本是否已经变成斜体的状态。 图标按钮不仅控制样式，而且可以显示出样式选择的状态。</p>

<p>时间继续推进，工具栏开始和菜单展开竞赛。图 18-8 所示的是 Word 工具栏的 Undo ( 撤销） 下拉菜单。这种精巧和强大的习惯用法，继续把老旧的菜单推入后台，基本上只让它行使教学 工具的工作。</p>

<p height="3em" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00004.jpg"/></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图18-8工具栏现在也包含了下拉菜单，比如图中显示的撤销菜单.以紧凑的方式提供了强大的功能.</p>

<p><br/>
    <br/>
    <span id="filepos0001958983"></span></p>

<p>可移动工具栏</p>

<p>有些软件，例如 Adobe 的 Creative Suite ，支持可移动或可拆式的工具栏或工具板。微软 Office 在 2007 版之前，曾采用过一系列工具栏，用户可以选择所需要的工具栏，让它可见或不可见。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00365.jpg"/></p>

<p>About Face 4 :交互设计精髓</p>

<p>如果是可见的，则它们会被动态地放置在设定好的五个位置之一。这些工具栏还可以附加或“停 靠 ” （ dock) 在应用主窗口四边的任意一边。如果用户把它从边上移开，它会变成一个有小标题 栏的悬浮工具栏，如图 18-9 所示。</p>

<p><i>moo</i></p>

<p>口， <u>圍</u></p>

<p align="right" height="0pt" width="0pt"><font size="1"><i>H</i></font> Home Layout</p>

<p>尊 ;Document2</p>

<p>J <font size="5">08</font> □</p>

<p><font size="2">Vs</font></p>

<p align="right" height="0pt" width="0pt"><font size="1">Docui</font></p>

<p align="right" height="1pt" width="0pt"><font size="1">Ou_To&lt;</font></p>

<p>went Elcmcnls</p>

<p><font size="1">Tables</font></p>

<p align="right" height="0pt" width="0pt">A，—</p>

<p align="right" height="0pt" width="0pt"><font size="1">"-Tr^rr</font></p>

<p align="right" height="0pt" width="0pt"><font size="1">Review</font></p>

<p>font</p>

<blockquote>
    -12 <font size="6"><i>^ Ati^</i></font>
</blockquote>

<blockquote>
    <font size="1">~ — v；:,</font> <font size="1">Show first line only Formatting ® ^ ^ A./**4"</font> <font
        size="1"><i>^ M ^~r</i></font> <font size="1">Stvt«s</font>
</blockquote>
<p height="0pt" width="0pt"><font size="5">AH</font></p>

<p>二 I</p>

<p><font size="1">T Bnd and Replace</font></p>

<p>[Search C</p>

<p>▼</p>

<p>fcn::</p>

<p>|ftepia«w5r <font size="1">「</font></p>

<p>Watches:</p>

<p>i:</p>

<p align="right" height="0pt" width="0pt"><u>阿•丨</u> <u>ail</u></p>

<blockquote>
    <font size="1">! Sec 1 Pages: 1 of 1 Words：</font> <font size="1">Oof 0 [.j? 100%</font> <font size="1"><s>丨的叫—»</s></font>
</blockquote>
<p><font size="2">图</font> 18-9 <font size="2">工具栏可水平停靠（顶部）、垂直停靠（左侧），或拖动成为一个悬浮工具板（</font> free-floating palette <font
        size="2">)。</font></p>

<p>允许用户随意移动工具栏，可能会使工具栏互相遮拦。微软通过扩展组合图标按钮和下拉 菜单，方便地解决了这个问题，它们只有当工具栏被遮住时才出现，并且可以通过下拉菜单访 问隐藏的菜单项，如图 18-10 所示。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00365.jpg"/></p>

<p><font size="2">图</font> 18-10 <font size="2">微软聪明地重叠工具栏（或缩至合适的尺寸），而且保证重叠之后仍然能够访问到所有的功能。</font></p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>自 2007 版起，微软放弃了超级灵活的工具栏，开始采用更具可预见性和更加诱人的 ribbon 控件（在本章的后面会详细讨论），以及可快速访问的单个工具条。不过，对于访问隐藏的 ribbon
    和工具栏项目时，微软依然采用了和菜单一样的习惯用法。</p>

<p><span id="filepos0001967117"></span></p>

<p>可定制工具栏</p>

<p>因为工具栏代表所有用户的常用功能，但对于每个用户而言，这些常用功能是不同的，这 便产生了问题。显然，微软找到了这个问题的解决方法：在软件中装载了典型用户最可能使用 的常用控件，其余的让用户定制。（在 Office 2007
    及以后的版本， ribbon 就是可以定制的，本</p>

<p>章后面会讨论到这一点。）</p>

<p>由于也加入了非日常使用的工具，这种解决方法的实际效果有所减弱。例如， Word 工具栏 的默认图标按钮套件包含了一些不常用的功能，比如，插入自动文本，而这样的控件更像是功
    能清单列表，或是产品经理妥协的结果。虽然它们偶尔也会被用到，但多数用户不会经常使用。 针对这个问题，我们可以采用人物角色（ persona) 或场景剧本（ scenario) 的方法来解决，效果 还是不错的（参见第 3 章和第 4
    章）。</p>

<p>Word 中，高级用户可以定制功能列表，他们可以随心所欲地配置工具栏。为工具栏提供这 种级别的定制能力存在某种危险，因为鲁莽的用户可能会创建出一个无法识别、无法使用的工
    具栏。而且，定制本身也是费时费力的。人们不愿意为创建一个丑陋而难用的东西花费力气， 他们更可能只会进行一点个性化的转变，而且数月或一年才偶尔一次。</p>

<p><span id="filepos0001969406"></span></p>

<p>情境（弹出）工具栏</p>

<p>情境工具栏 （contextual toolbar) 是工具栏真正有意义的进化，与右键单击弹出的情境菜单 (contextual menu) 类似，它是鼠标旁边显示的一小组图标按钮。在有些软件中，图标组和被选
    对象有关。如果被选对象是文本，图标按钮组则是一系列的格式选项 • ，如果被选对象是图形， 则显示的图标按钮允许使用者改变图形对象的属性。这种变体，在微软 Office 2007 中被广泛使 用，被称为 “ 小工具栏 ”（mini
    toolbar) 。另外，其他软件中也有一些类似的用法，比如 Adobe 的 Photoshop ( 其中的工具栏是处于停靠状态的）和 Apple 的 Logic 音乐制作软件（其工具栏是一 个模态的光标板 （modal
    cursor palette)) 〇</p>

<p><span id="filepos0001971078"></span></p>

<p>ribbon <font size="5">控件</font></p>

<p>在本章前面我们讲过，微软在 Office 2007 版中引入了一种新型的习惯用法（参见图 18-11 )。<br/>
    <br/></p>

<p>本质上它也是工具栏，只不过更大，位置是水平的，它包含了多个带有文本标签的功能组，还 包含了各式各样的图标按钮和文本命令。这里的标签与菜单上使用的标签类似，将功能分组（比 如 PowerPoint 2010 中的 File 、 Home
    、 Insert 、 Design 、 Transitions 、 Animations、Slide Show 、 Review 及 View 等）。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00220.jpg"/></p>

<p>图18-11 PowerPoint软件用ribbon代替了菜单系统和传统的工具栏，ribbon本质上是一个带有标签的菜单和工具栏混合体。</p>

<p><br/>
    <br/>
    <span id="filepos0001973148"></span></p>

<p>工具板</p>

<p>工具板 （tool palette) 作为一种交互的习惯用法，出现的时间早于工具栏。 MacPaint 的早 期版本或许是第一个运用了工具板的软件。自那时起，工具板就成为图形制作和各类创作软件 中最主要的交互方式。</p>

<p>工具板和工具栏有一个很重要的区别。前面讨论过了，工具栏是一系列可以立即访问的命 令的组合，我们只有选中某个命令时，该命令才能发挥作用，而且这些命令通常都和改变对象
    属性的值有关。而工具板则不同，它包含的是一系列互斥的功能（意思是说，有且只有一个功 能处于激活状态），每个功能代表了应用的一种操作状态，这些操作状态包括：</p>

<p>• 对象创建状态。</p>

<p>• 对象选择状态。</p>

<p>• 对象操作状态。</p>

<p>此外，由于沿袭了自 MacPaint 软件以来的历史习惯，工具板基本上都是垂直放置的，而且 通常包含了两列图标按钮或组合图标按钮。组合图标按钮可以被点击，从而调出一系列其他类 似的功能。例如，在 Adobe Illustrator
    软件中，点击并保持在 Eraser 按钮上，我们便可调出 Scissor 和 Knife 这两样工具。</p>

<p>工具板通常可以停靠和悬浮，这一点也和工具栏类似。前面提到，工具板在图形制作软件 中非常流行，因为这类软件中，非模态访问工具是好用的，甚至是至关重要的，这样可以让使 用者始终处于一个富有生产力的流的状态中 。Adobe
    Fireworks (RIP )以及其他的一些由 Macromedia 公司开发的软件，是最早的一批使用停靠结构的软件，这样减轻了在屏幕上管理诸 多窗口的额外负担。近年来， Photoshop 和 Illustrator
    也开始采用该用法，如图 18-12 所示。</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p align="center" height="2em" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00367.jpg"/></p>

<p>图18-12 Adobe Illustrator中的停靠工具板，不仅与非模态对话框有着类似的优点，而且还没有对话框的缺点，即用户
    无须费力去打开、移动、关闭对话框。工具板和工具栏在形态上很类似，因此使用者用起来也很熟悉.无须过多的想象便 可以自如地调用里面的控件（controls)和部件（widget),在用户界面上提供直接的、可视化的、一致的功能。</p>

<p><br/>
    <br/>
    <span id="filepos0001977333"></span></p>

<p>侧栏、任务窗格、抽屉</p>

<p>为高效工作流而设计的各种非模态的习惯用法，在不断地演进，最后出现的一种是侧栏 (sidebar) 或任务窗格 （task pane) 。它是位于应用窗口中的一个专用窗格，其用途是提供各种
    功能，取代了原来经常使用的、具有同样用途的对话框。第一个使用侧栏的是 Autodesk 的 3DS Max, 它是一个 3D 建模软件，用户通过侧栏可以调整对象的参数。主流软件里运用的侧栏有 Windows 浏览器 、IE
    浏览器里的浏览栏 （Explorer Bar)，Mozilla Firefox 的侧栏 ，Apple iLife 软件中 Inspector ，微软 Office 里面的任务板 （Task Pane)。Adobe Lightroom
    软件则全盘采用了 这种侧栏的用法：该应用中的几乎所有功能都是以非模态的方式通过侧栏来实现的，参见图 18-13 。 Adobe 最新版的 Creative Suite 系列软件中，也开始运用侧栏，原来大多数的模态化的功
    能，现在都被强健的标签式的任务窗格给取代了。</p>

<p>作为一种交互习惯用法，侧栏实现了很多希望，并且不必把它们限定于屏幕的两侧常放在 文档窗格或工作区下方的专门的属性区域。它不仅可以让使用者修改被选对象，而且把用户的 困惑和屏幕管理的工作量降至最低，参见图 18-14
    。侧栏可以包含固定控件，也可以包含依当 前选择而变的情境控件。</p>

<p align="right" height="2em" width="0pt">377</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00342.jpg"/></p>

<p><img align="baseline" alt="" height="45" src="../Images/Image00055.jpg" width="231"/></p>

<p><img align="baseline" alt="" height="21" src="../Images/Image00265.jpg" width="34"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00111.jpg"/></p>

<p><img align="baseline" alt="" height="81" src="../Images/Image00160.jpg" width="123"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00301.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00195.jpg"/></p>

<p>About Face 4 :交互设计精髓</p>

<p><font size="2">图18-13 Adobe Lightroom中的侧栏取代了原来的几十个对话框，这种方法同图18-12中的工具板类似。不同点在于,
    侧栏不需要使用者调整其在屏幕上的位置，使用者也无须对它们一个一个地解锁或撤销（不过，整个侧栏是可以隐藏的）。 这进一步降低了管理工作，在呈现功能方面超越了对话框，是显著的进步。</font></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="81" src="../Images/Image00160.jpg"
                                                width="123"/></p>

<p>Pattern Diction</p>

<p>• Product</p>

<p><font size="1">• R#«pon»«f</font></p>

<p><font size="1">•</font> CKAnn^tf</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00195.jpg"/></p>

<p><font size="2">图18-14 Cooper公司设计的这个应用，是一个客户关系管理系统（CRM),界面上采用了专门的属性区域。当使用
    者选择了工作区的一个对象时（屏幕上半部分的左面），其属性就会显示在下面。这样既为使用者保留了使用环境，同 时也将屏幕管理的工作量降至最低</font></p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>抽屉（ drawer) ，是任务窗格的一个变种。这种窗格，在保留了屏幕上主体内容区域的同时， 还可以被大部分或彻底隐藏，其表现形式和一个弹出式的抽屉类似。尽管它对于尺寸较小的屏
    幕是很有帮助的，但无疑带来了屏幕管理工作，而普通的任务窗格则没有这个问题。 Adobe 的 一些产品中，开发出了类似的替代方案，即单击某个键就可将所有的二级窗格和工具板全部隐
    藏（或恢复）起来。此设计适合高级用户，他们用完工具后需要专心于创作内容时，可迅速地 将杂乱的工具临时清理干净。</p>

<p><span id="filepos0001984151"></span></p>

<p><font size="6">点操作、选择、直接操作</font></p>

<p>屏幕上的对象可以直接通过点设备 （point device) 进行操作，我们想到这一点时，往往会 想，如果能直接用手指操作岂不是最好？自己的手指是最顺手的。你现在可能就有好几个手指
    头是闲着的，可以随时使用。它们唯一的缺点，可能是手指尖不够精细，在高分辨率的屏幕上， 可能无法精确操作十分细小的对象，此外，今天大部分的桌面显示器尚不支持手指触碰操作。</p>

<p>( 虽然眼睛也是最佳的点设备，但我们还需要它们来干别的事情。）因此，我们今天仍然还在使 用其他各式各样的点设备，而其中最流行的 —— 恐怕也是效果最好的 —— 就是鼠标。</p>

<p>设计师可能也会考虑其他常见类型的点设备，例如轨迹球、触控板（ touchpad )、数字化写 字板等。我们当然可以做这方面的考虑，前两种其实操作起来有些像鼠标（虽然人体工学上有 所不同），而数字化写字板和触摸屏就有点不一样了。</p>

<p>不过，鼠标只是相对意义上的点操作设备 —— 移动鼠标就是把光标从现在的位置移开。而 数字化写字板才是真正意义上的点操作设备，板上的点直接对应着屏幕上的具体位置。如果你
    把笔从写字板的左上角拿起，放到右下角，光标也会立即从屏幕的左上角跳到右下角。</p>

<p>触摸屏，尽管现在的一些笔记本电脑和台式机上也配备了，但不幸的是，直到撰写本书的 时候，它们依然在用着光标或点操作设备的概念，尽管这时光标已经没有意义了，而且在你用
    手指点触对象时，这个光标的概念甚至还会让人很费劲。实际上，试图强行将触摸屏和点操作 联姻的做法，是非常让用户困惑的。</p>

<p>桌面触摸屏设备，如果有存在的必要，最好去参考一下当代触屏智能手机的屏幕 UI ，例如 i 〇 S, 它消灭了光标的概念，以及所有和光标有关的东西。同时，为了便于触摸输入，这些设
    备应当可以水平放置，因为没有人愿意在垂直的屏幕上悬臂操作数个小时。</p>

<p>接下来，本节将聚焦于基于鼠标和光标的桌面交互。</p>

<p align="right" height="4em" width="0pt">379</p>

<p>About Face 4 :交互设计精髓</p>

<p><span id="filepos0001987884"></span></p>

<p>鼠标的人体工学</p>

<p>当鼠标在屏幕上漫游时，在近距离活动和远距离移动之间有一条明显的分界线。如果你的 目标很近，就可以将手掌根部放在桌上保持不动；如果目标很远，则你必须抬起手移动手臂。
    放下手掌保持不动，将光标从一个地方移动至另一个地方，这时你使用的是手指肌肉的精细运 动机能。当你抬起手做更大的移动时，你使用的是手臂肌肉的粗略运动机能。粗略运动机能并
    不比精细运动机能快或慢，但两者之间的转换是困难的。因为用户必须将两组肌肉整合协调起 来，这需要计算机使用者花上相当多的时间练习才能掌握。（这实际上有点像作画，作画也需要
    大量练习。）打字者不喜欢被迫将手离开键盘上的基准位置，因为这需要肌肉群之间的转换。基 于同样的原因，计算机使用者也不喜欢在屏幕上移动操作控件时，被迫在精细和粗略运动机能
    之间切换。因此，我们设计界面时，也要迫使用户持续、大量地做这个切换动作。</p>

<p>单击鼠标按键也需要精细运动机能，否则就无法准确将鼠标和光标移动到目标位置，并可 能会触发错误的动作。使用者还必须将手牢固地靠在桌面上，这样才能进入到精细运动控制模
    式，才能将光标放到目标位置。之后，他必须保持这个位置，才能点击。而且，如果在一开始 光标远离目标位置时，他还必须使用粗略运动将光标移至目标位置附近，再转换成精细运动完
    成这次点击。某些控件，如滚动条，在交互时就有这些问题，强迫使用者在精细运动和粗略运 动之间多次切换，才能完成一次交互，如图 18-15 所示。</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;

            <p>八</p><br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>

            <p height="0pt" width="0pt"><font size="5">V</font></p>

            <p><font size="1">V,</font></p>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 18-15 <font size="2">图中最左侧的那个是我们熟悉的一种滚动条，是各种</font> GUI <font size="2">控件中较难使用的一种。从向上滚屏转变成向下滚
    屏，用户必须从单击按键所需的精细运动控制，转变成移动手到滚动条的另一端所需的粗略运动控制，再转换成精细运 动控制精确定位光标，再单击按键</font> . <font size="2">位于图中间的滚动条稍微做了一些调整，两个按键靠在一起，排除了以上问题</font>
    (Macintosh <font size="2">的滚动条两个箭头按键被设置在底部）。右边的滚动条在视觉上有些杂乱，但却是更为灵活的交互。输入设 备中的滚轮</font> （scroll wheel) <font
        size="2">或者电容式手势传感器，是解决这个问题的好办法。</font>
</blockquote>
<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>设计者必须要特别留心使用者的能力、技巧水平及使用情境，才能对使用者在该界面下的 运动工作的复杂程度做出清醒的判断和决定。在降低复杂程度和工作量的同时，也能发挥效力，
    我们需要这种微妙的平衡。这里有一条广泛适用的原则：同时使用的东西，我们一定要把它们 放在一起。</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00083.jpg" width="55"/></p>

<p>不仅是手工操作不灵敏的用户会觉得鼠标使用起来有问题，有许多经验丰富的计算机用户， 特别是打字员，也发现使用鼠标有时存在困难。对于数据密集的任务，键盘比鼠标要好。手不
    得不离幵键盘去操控鼠标，调节光标的位置，然后又不得不回到键盘，是令人沮丧的。在个人 计算机的初期，键盘一统天下，如今又常常是鼠标一统天下。软件应该对所有的移动和选择都 提供完整的鼠标和键盘支持。</p>

<p>设计原则</p>

<p>浏览和选择任务要同时提供鼠标和键盘支持。</p>

<p>相当多的计算机用户使用鼠标时都会遇到麻烦，所以如果我们要想成功，设计软件时不仅 要考虑到老练的鼠标用户，也要照顾到这部分人的情绪。这就意味着每种鼠标的习惯用法都至
    少存在替代方法，当然这不是任何情况下都能做到的。不过，目前多数商业和生产软件都可以 很好地用键盘操作。</p>

<p><span id="filepos0001994925"></span></p>

<p>鼠标按键和控制</p>

<p>鼠标的发明者们，都考虑过鼠标到底应该有几个按键，但他们没有达成一致意见 <font size="2">。一</font> 些人 说一个按键是对的，另一些深信应该有两个，还有一部分人鼓吹多个按键的鼠标可以用来分别 或一起单击，比如有 5
    个按键的鼠标，可以有 32 种不同的组合。最终，微软为它的 PC 采用了 两个按键的鼠标，苹果公司为它的 Macintosh 鼠标安装了一个按键，而一些 UNIX 社团则采用 了三个按键。单个按键的鼠标是 Macintosh
    最主要的缺点之一。苹果公司广泛的用户测试显示 出新手最适合的按键数目是一个，因而单按键的鼠标被庄严载入了苹果公司的历史。这有些可 悲，因为当新手用户走出初学阶段，成为永久的中级用户 （perpetual intermediate
    ),鼠标右键完 全可以发挥作用的时候，单键鼠标就成为一种不幸。为了新手的简洁，它牺牲了大多数计算机 用户的效能。不过，最终苹果公司还是承认了右键情境菜单的重要性，在鼠标上也配备了右键 (
    隐藏式的），并曾经一度还加上了位于硬件滚动球下方的第三个键。今天的苹果鼠标上，一个 键都没有，依靠触摸滑动来实现各种自定义的操作，用户可以自行想象键的存在并定义其用途。 微软，对双键配滚轮的鼠标始终都非常满意，一直沿用到今天。
</p>

<p align="right" height="4em" width="0pt">381</p>

<p>About Face 4 :交互设计精髓</p>

<p>鼠标左键</p>

<p>总的来说，鼠标左键用于所有主要的直接操作功能：启动控件、选择、绘画等。左键最常 用的方式是激活或选择。对于按钮或复选框这样的标准控件，单击左键意味着按下按钮或者选
    择选项。如果你在数据上单击，则通常意味着选择。我们在本章后面进一步讨论这个问题。</p>

<p>鼠标右键</p>

<p>微软和其他许多公司曾经长期对鼠标右键视而不见。只有少数勇敢的程序员将一些行为与 右键关联起来，但也是一些额外的、备选的或高级的功能。当 Borland 国际公司用右键作为进
    入属性对话框的工具时，业内对这种行为的看法充满矛盾，如他们所说，是充满批判性的欢呼。 微软最终借鉴了 Borland 的做法，在 Windows 95 上做出了改变。苹果不太情愿地跟随了微软的
    步伐，现在鼠标右键也担负起了重要而又极其有用的角色：可直接访问属性，以及其他情境中 针对对象和功能的相关动作。</p>

<p>滚轮和滚球</p>

<p>点操作设备上最有用的发明之一是滚轮。滚轮有很多种，外形略有差异，但基本上都是内 嵌在鼠标上，用中指操作。向前滚动滚轮，屏幕上卷；向后滚动，屏幕下卷。按下滚轮则相当
    于按下了第三个键，不过很少有软件会用到它。不过，这也没有什么可惜的，因为按下滚轮是 个不太好操作的动作，有时还会不小心滚动它，造成误操作。</p>

<p>滚轮的妙处在于使用者无须费力地与难用的滚动条打交道了（参见图 18-15 )。有些滚轮还 支持对横向滚动条进行操作。有些鼠标，例如苹果的 Magic Mouse, 根本就没有滚轮或滚球， 但它用电容式触摸传感器来代替滚轮。</p>

<p>元键</p>

<p>同时使用元键（ modifierkey) 和鼠标，可以扩展直接操作的习惯用法，元键指的是 Ctrl 键、 Alt 键、 Command 键（苹果电脑）和 Shift 键。</p>

<p>一般来说，这些键被用于改变命令。比如，在文本域中按下 c 键就输入了一个 c 字母，但 按下 Ctrl 键并保持住，再按下 c 键，就意味着要 “ 复制所选对象 ” 。在 Windows 的 Explorer 中， 按下并保持住
    Ctrl 键，再拖动文件，就把 “ 移动”功能变成了 “ 复制 ” 功能。这些键也通常被 用来改变鼠标的行为，比如按住 Shift 键就可以让光标保持在一个方向上移动（上下左右）。我 们在本章后面将详细讨论这些用法。</p>

<p>在使用元键这个问题上，苹果公司很早就有了清晰的标准规范，而且在用法上也越来越一 致。在 Windows 世界里有些不同，在这方面没有统一清晰的用户界面标准，但近来也浮现出了</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>一些习惯用法（基本上和苹果的差不多）。</p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00034.jpg" width="54"/></p>

<p>我们可以用光标形状变化来动态显示元键的用法，这种做法很好。当元键被按下时，光标 形状发生改变从而反映出某种习惯用法的新功能。</p>

<p>册原则</p>

<p>用光标形状变化表明元键的用法。</p>

<p>指向</p>

<p>指向（ pointing), 这种简单的操作是图形用户界面的基石，也是所有鼠标操作的基础。 用户移动鼠标，直到屏幕上的光标指向所期望的对象或置于对象之上。即使没有单击，只是
    指向，屏幕上的对象也能注意到。直接操作的对象常微妙地改变它的外观。当鼠标光标移到 对象上时，对象会显示这种特性。这种行为称为受范性（ pliancy ),我们将在本章后文中进一 步讨论。</p>

<p>单击</p>

<p>用户将鼠标停在目标位置上，按下按键然后释放。通常该动作被用来改变控件的状态，或 选择一个对象。在文本或表格单元中，单击意味着 “ 选中此处 ” 。对于一个按钮控件，状态改变
    意味着当鼠标按键在控件之上按下时，按钮进入或保持按下的状态。当鼠标按键释放，按钮就 触发，与之相关的动作就会出现。</p>

<blockquote>
    <font size="7">&nbsp; <sub>
        <small><font size="7"><font color="#000000">0</font></font></small>
    </sub></font>
</blockquote>
<blockquote>
    册原则
</blockquote>
<blockquote>
    单击意味选择数据或对象，或改变控件状态。
</blockquote>
<p>但是，如果用户在鼠标按键按下时，移动光标离开控件，那么按钮控件就会回到未按状态。 尽管直到释放鼠标按键为止，输入焦点仍然在控件上。但当释放鼠标按键后，输入焦点切断了，
    任何事也没发生。如果用户改变了主意，这也提供了一条方便的逃逸途径。本章后面将详细讨 论单击过程中鼠标按下和鼠标释放的事件。</p>

<p>指向和单击的组合</p>

<p>最基本的，你可以利用鼠标做两种基本操作：移动它指向不同的事物，或者单击按键。任 何超出指向和单击的鼠标动作都是一种或多种动作的组合。我们在此总结出，在不借助元键的
    前提下，所有的鼠标动作。为了讨论方便，我们为每种动作取了个简短的名字（即圆括号中的 名字）：</p>

<blockquote>
    383<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>• 指向（指向）。</p>

<p>• 指向，单击左键，释放（单击）。</p>

<p>• 指向，单击右键，释放（右击）。</p>

<p>• 指向，单击左键保持住，拖动，释放（单击拖放)。</p>

<p>• 指向，单击左键，释放，快速单击左键，释放（双击）。</p>

<p>• 指向，同时击左右键，同时释放（合击）。</p>

<p>• 指向，双击不释放，拖动，释放（双拖）。</p>

<p>鼠标老手可以毫不费力地做出上述七个动作，但一般用户无法做出最后两个动作。</p>

<p>单击拖放</p>

<p>这种通用的操作有许多常见的用法，包括选择、改变形状、改变位置、绘图、拖放。在本 章以及本书接下来的章节中，我们都会讨论到它们。</p>

<p>和单击一样，在用户失去方向或者有失误时，我们要为他们提供逃生仓。 Windows 的滚动 条就是一个这样的好例子：用户在没有直接将鼠标置于滚动条上时，也能成功滚动（想象一下，
    如果它像普通按钮一样必须将鼠标置于其上，那将是多么难用）。但是，如果用户的鼠标离滚动 条太远，它就会自动回到单击前的位置。这种行为很有道理，因为长距离的滚动需要粗略运
    动控制，使它难以保持在滚动条控件的范围内。如果拖动得太远，则滚动条做出合理的猜测， 即用户并不是真的想滚动。一些程序将这种限制设置得太窄，导致滚屏的行为变幻无常，令人 沮丧。</p>

<p>在触控板上单击拖放，尽管也是可行的，但实际用起来会很糟糕，尤其是在上一段提到的情 境中。拖放操作在触控板的电容式的感应表面上，没有在鼠标上来得稳健，而且大多数触控板的
    面积都不大，这也是个制约。苹果最近增大了其触控板的面积，估计就是出于这方面的考虑。</p>

<p>双击</p>

<p><img align="baseline" alt="" height="59" src="../Images/Image00133.jpg" width="51"/></p>

<p>如果双击由两次单击组成，逻辑上似乎应该是双击首先要完成与单击相同的事情。当鼠标 指向数据的时候确实是这样的。单击选择对象，双击选择对象然后采取动作。</p>

<p>设计原则</p>

<p>双击意味着单击再加上动作c</p>

<p>对双击的基本理解来自 Xerox 的 Alto/Star 以及后来的 Macintosh, 它也是当代 GUI 的标准。 事实上，对于不太灵活的用户来说，双击是困难的，一些人感到痛苦，还有少数人根本做不到，
    这种现状在很大程度上被忽视了。要解决这个访问性（ accessibility) 的问题，可以设计既可双</p>

<p>384<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>击操作又有对应的单击操作的习惯用法，从而实现同样的功能。</p>

<p>尽管在文件和应用图标上双击有着确定的含义，但在多数控件上双击没有意义，第二次的 单击动作通常被忽略不计，或者更普遍的情况下认为它是第二次独立的单击。根据控件的不同，
    这种动作可能没有危险，也可能造成麻烦。如果控件是切换按钮，你会发现只是回到了它的初 始状态（迅速地打开后关闭）。如果控件在第一次单击后已经发挥作用，例如，对话框里的 OK 按钮，结果就不可预料 ——
    无论第一次单击后出来的是什么，获得的都是第二次按钮按下的信 息。由于缺乏足够的示能提示，因此无法判断某个对象是否应该被双击。所以，我们应该尽量 不用或少用，特别是在单击可以胜任的时候。</p>

<p>合击</p>

<p>合击（ chord-clicking) 意为同时单击两键，尽管并不真正需要两个按键精确地同时单击或 释放，但为了合击有效，第二个按键被单击，必须发生第一个按键被释放之前。</p>

<p>有两种不同的合击。第一种最简单，用户指向某对象的同时单击两个按钮。这种习惯用法 很笨拙，而且在现存的软件中不多见，虽然一些创造欲望强烈的程序员在选择时将其作为 Shift 键的替代。</p>

<p>第二种是使用合击来取消拖动。拖动开始于简单的单按钮拖动，接着用户增加了第二个按 钮。虽然这种技术听上去比第一种更晦涩难懂，但它确实在行业中得到了更广泛的接受。</p>

<p>双击拖动</p>

<p>这是另一个仅为专业人员专用的习惯用法。无错误地执行双击并拖动，就像在拍你头的同 时又摸你的肚子，像三击一样，仅在一些特殊的、独占式的应用中使用，将它作为选择的扩展 使用。例如在 Word
    中，你可以双击文本选择整个单词；作为功能的扩充，你可以通过双击并 拖动扩展选定一个又一个单词。</p>

<p>大型独占式应用软件中有很多选择的替换方法，双击并拖动这种习惯用法在它们中的应用 还算是合适的。对于绝大多数产品，我们建议你还是坚持使用更基本的一些鼠标行为为好。</p>

<p>鼠标释放和按下事件</p>

<p>每次用户单击鼠标按钮（或触控板 ) ，程序必须处理两个独立的事件：鼠标按下事件和鼠标 释放事件（ mouse-down, mouse-up) 。不过，不同平台、不同产品对这两个事件的解释不同。但
    在同一个产品中（理想情况下是最好在同一个平台上），这些动作应该严格一致。</p>

<p>当选择对象时，选择总发生在按键按下时，因为按键按下是拖动序列的第一步，如果不先 选择，就无法拖动。</p>

<blockquote>
    385<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00027.jpg" width="54"/></p>

<p>设计原则</p>

<p>在对象或者数据上按下鼠标意味着选择。</p>

<p>另一方面，如果光标在控件，而不是所选数据上面，按下按键的动作是暂时激活控件的状 态转换。当控件最后发现按键释放事件后，它就会执行状态转换（参见图 18-16 )。</p>

<blockquote>
    D <font size="7">贤贤嘎</font>
</blockquote>
<blockquote>
    ✓
</blockquote>

<blockquote>
    <img align="baseline" alt="" height="70" src="../Images/Image00098.jpg" width="54"/>
</blockquote>
<blockquote>
    <font size="2">图</font> 18-16 <font size="2">上面的几个小图描述了</font> Windows 8 <font size="2">中复选框的反馈和状态改变。第一个图是未选中的复选框，第二个是鼠标
    悬停（</font> mouseover <font size="2">或</font> hover) <font size="2">状态，第三个则显示了点击（鼠标按下</font> mouse-down) <font
        size="2">时的状态，第四个显示了鼠标释放</font> (mouse-up) <font size="2">但仍处于悬停状态，最后一个图显示了鼠标未悬停的被选中的复选框。注意：这里点击时是有视觉反馈的，
    复选框直到鼠标键松开才有状态改变。</font>
</blockquote>
<p>设计原则</p>

<p>在控件上鼠标按下意味着预备动作；鼠标释放意味着执行动作。</p>

<p>这种机制允许用户从容地退出无意中发生的单击。例如，在按下按钮的操作中，用户只需 将鼠标移出按钮，这样即使释放鼠标按键，选择也无效。对于复选框，意思也相同：一旦鼠标
    按下，所选择的复选框视觉上已经激活，但直到鼠标释放，选择才会真正有效。这种习惯用法 叫作 “ 顺从响应暗示 ”（pliant response hinting), 我们在第 13 章中详细谈论过。</p>

<p>触控板、轨迹球、手势传感器</p>

<p>几乎所有用过笔记本电脑的人，都用过触控板（ trackpad) 。很多人在很多场合下，都不愿意 携带或使用鼠标，例如开会时、咖啡厅里、厨房的餐桌上、就寝前的床上等。要记住，触控板操
    作起来比鼠标要困难一些，因为它的操作依赖于手指在电容传感器表面的接触，因此拖放动作或 一些精细动作实现起来是有一些困难的。当然，多数程序员在设计软件的时候并不会为此改变什
    么，但如果你的用户的确是频繁使用或只使用触控板时，你就必须要考虑到触控板的可用性问题。</p>

<p>Windows 笔记本电脑的触控板上，一般都会有一对明显的左键和右键。几年前，苹果在笔 记本上也加上了触控板，并且它巧妙地在触控板上加上了隐藏的按键，手指在苹果触控板上轻
    按，能产生出按键的效果，单指按下等同于按左键，双指按下等同于按右键。</p>

<p>轨迹球用得不多，只在一些需要精细操控并且空间有限的特殊应用中，或者是轨迹球在逻 辑位置关系上正好可以匹配屏幕上的物体的运动（例如 3D 建模软件等）时，才会出现。使用</p>

<p>386<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>轨迹球进行拖放操作是很困难的，因此凡是使用轨迹球的应用都应避免使用拖放操作。</p>

<p>苹果笔记本和台式机，近年来开始采用多点触控鼠标和多点触控板，它们已经成为苹果系 统的标配。对苹果操作系统本身的操作，使用者可以大量运用系统保留的多点触控手势。在开
    发设计苹果系统上的应用时，如果要使用多点触摸手势，则要特别小心，一定不要和系统保留 的手势发生冲突，并且多点触控手势一定不要成为主要的操控和导航手段。由于这些手势缺乏
    示能提示，因此它们应该和键盘快捷方式或其他的命令快捷方式一样，只适合高级用户。</p>

<p><span id="filepos0002023516"></span></p>

<p>光标</p>

<p>桌面上的点指和选择（ pointing 、 selection) 是靠光标（ cursor) 来完成的，它是屏幕上鼠标 位置的可视代表物。依据惯例，它通常是一个指向左上角的小箭头，但在程序控制下，它能在 一个较小的范围内（在
    Windows 8 上是 32 像素 X32 像素）变成很多形状。因为通常来说，光 标是为了解决单个像素的问题 —— 指向的对象只占一个像素，所以必须有某种方式让光标精确
    地指示它所要指向的确切像素。解决方法就是在任何光标上设置一个单像素作为指向的确切位 置。这个单像素称为热点（ hotspot )。对于标准箭头，逻辑上热点是箭头尖部。无论光标的形状 如何，它都是单个热点像素。</p>

<p>我们讨论过，直接操作的成功关键是丰富的视觉反馈。对于使用者来说，界面上可以操作 的东西必须显而易见，哪些是传递信息的、哪些是纯粹的装饰也要清清楚楚。使用者对鼠标的
    光标反馈和暗示的注意程度，更是创建有效的交互习惯用法的关键，这些内容我们在第 13 章中 曾讨论过。</p>

<p><span id="filepos0002025492"></span></p>

<p>选择</p>

<p>选取某个对象或控件的操作，被称为选择（ selection )。它是个简单的习惯用法，鼠标点指 再单击该对象就完成了该操作（当然，也可以通过其他方式来完成，例如键盘或其他按钮等)。
    选择是其他复杂交互动作的基础。用户选取了某个对象后便可以对该对象进行操作。这一系列 动作发生的序列可简称为对象-动词次序 （object verb ordering )。</p>

<p>命令次序与选择</p>

<p>用户界面的一个基本问题，是以怎样的方式来表达命令。几乎每一个命令都包括一个动词 (verb) 来描述动作，以及一个对象（ object )〇</p>

<p align="right" height="6pt" width="0pt">按照这个思路，你有两种方式来表达命令：可以先指定动词，然后对象；或者以相反的次 序，先指定对象，然后动作。通常分别称之为 “ 动词 - 对象次序 ” 和 “
    对象 - 动词次序 ” 。（例如，</p>

<blockquote>
    387
</blockquote>
<p>About Face 4 : 交互设计精髓</p>

<p>“ 扔给我那个球。 ” 和 “ 那个球，扔给我。 ” ）这两种次序在现代用户界面中都釆用了。</p>

<p>动词 - 对象次序和英语中表达命令的方式是一致的 ® 。因此，命令行系统中就模仿了这种语 法结构，这样比较符合逻辑。（比如，在 UNIX 下删除一个文件，使用者必须键入命令 “rm filename.txt’’ 〇 )
    在图形界面首次出现时，动词 - 对象次序带来的问题就清楚地显现出来了。与具有严格、正 式结构的命令行习惯用法不同，图形界面中必须运用状态（ state )来把命令中的不同交互动作
    绑定。如果用户选择了一个动词，系统就必须进入一种状态一 - 或者叫模式，来标示出系统正 在等待使用者选择一个该动作要施加的对象。在这样的一个简单情况下，使用者便选择一个对
    象，这样一切都很顺利。但是，如果用户想将动词施加于多个对象，只有用户提前告诉系统将 有多少个对象，或者用户输入第二个命令告诉系统他的对象列表，系统才可能知道。这是个非
    常笨拙的交互方式，需要让用户以一种非常不自然的方式来表达他们自己的想法，也非常难以 学习。在高度结构化的语言环境里非常好的操作，在宽松的交互世界里却会彻底地土崩瓦解。</p>

<p>如果把命令次序改成 “ 对象 - 动词 ” ，我们就不需要担心这样的情况。用户先选择好要操作 的对象，然后再指出要施加在对象上的动词，应用程序再对所选对象执行所定制的功能。好处
    之一是，用户能轻松地在同一复杂选择上执行一系列动词。好处之二是，当用户选择一个对象 时，应用只能显示出合适的相应命令，这样便减少了用户的认知负担，也减少了找到命令所需
    的视觉上的工作量（在视觉界面里，所有的命令视觉上都必须是可见的）。</p>

<p>注意，这里有一个新的概念悄悄浮现出来，而它在动词 - 对象世界中不存在，也没有必要存 在。这个新的概念就是选择（ selection) 。因为辨别对象和辨别动词的过程，并不在同一个交互
    层次中，我们需要一种机制来指出到底选择的是哪个操作。</p>

<p>对象 - 动词模型可能有点不好理解，但选择是一种非常容易掌握的习惯用法，只要见过一次， 就很难忘记。例如在 Outlook 中用 CtrH 单击选择多个邮件，然后删除，很快就成为根深蒂固的
    习惯。在英语的语言场景中，我们不能先选择对象。另一方面，我们在非语言场景里却很频繁 地使用着这个模型。比如，我们会先拿起一个罐头，然后再使用幵罐头的工具来开罐头。</p>

<p>在那些没有直接操作的界面中，比如模态对话框，选择的概念就没有必要存在。对话框通 常很自然地会伴随着一些 “ 对象 - 列表 - 完成 ” 命令，也就是 0K 按钮。这里，使用者可以先选 择功能，再选择一到两个对象。</p>

<p>对象 - 动词次序更适合用在直接操作的场合，当然也有一些场合中，可能动词-对象命令次</p>

<p>①译注：当然，我们汉语的语序同英文也类似。</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>序更有用或更可用。有些场合下，在没有命令的前提下，几乎是不可能先圈定对象的。比如， 一些地图绘制软件中，使用者通常无法先从列表中选择地址，再制图（当然在地址本中可以这 样做）；使用者一般会说： “ 我要先看地图，找这个地址
    ……”</p>

<p>离散选择和连续选择</p>

<p>虽然选择是相当简单的概念，但有一些变体值得我们来讨论一下。由于选择通常都是和对 象有关的，因此这些变体通常也和两大类被选择的对象数据有关。</p>

<p>有些情况下，数据可以被表示为相对其他对象独立操作的不同视觉对象。桌面上的图标和 画图程序中的矢量对象就是很好的例子。这些对象也可以彼此独立地被选择。我们把它们称为 离散数据 （discrete data) ，针对它们的选择称为离散选择
    （discrete selection )。离散数据不一定 是同一类的，离散选择也不一定是连续的。</p>

<p>与之相反，有些程序把数据表示为由许多连续的小片数据组成的矩阵。 Word 中的文本，或 Excel 中的单元格，就是由成百上千相似的小对象组成的连贯整体。这些对象常以连续分组的 方式进行选择，所以我们称之为连续数据
    （contiguous data ),对连续数据的选择就是连续选择 (contiguous selection) 〇</p>

<p>连续选择和离散选择都支持单击选择和点击并拖动选择。单击通常选择了最少的有用的离 散量，而点击并拖动可以选择较多量，但二者还有其他明显不同。</p>

<p>在字处理软件中，文本都有自然的次序 —— 都是由连续的数据组成的。如果把字的顺序打 乱就会破坏文章的意思。从头到尾的字流按照一定的意义排成连续的序列，选择一个字或者一
    段话在整个数据的环境下才有意义，而随机的、零散的选择通常都是没有意义的。尽管在理论 上也可以进行离散的、不连续的选择，比如选择几个不连续的段落，但用户确认选择，以及为 了避免不必要操作而带来的麻烦，远远超过了任务本身的价值。</p>

<p>另一方面，离散数据没有内在次序。尽管也可以给这些离散的对象赋予各种各样的次序， 但缺乏内在的关系则意味着用户还是要离散地选择这些对象（比如，进行 Ctrl +点击来选择多个
    不相邻的文件）。当然，有时候用户也会按照一定的组织原则来进行连续选择（比如按照时间顺 序排列的文件，可以选择那些较为久远的文件）。这两种方式的运用在矢量绘图工具（比如 Illustrator 或 PowerPoint)
    都很明显。在某些情况下，用户会对挨在一起的对象执行连续选择， 也可能希望选择单个对象。</p>

<p>互斥</p>

<p>通常，当做出一个选择后，以前任何选择都作废了，这种行为称为互斥 （mutual exclusion), 也就是一个选择排斥另一个选择。比如，用户单击一个对象，对象选中，对象保持选中状态，</p>

<blockquote>
    389<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>直到用户选择了其他事物为止。互斥对离散选择和连续选择都适用。</p>

<p>某些离散系统允许第二次单击所选对象来取消选择。这可能导致一种奇怪的情况：根本没 有选中，并且没有插入点。程序员必须决定这种情况对产品是否合适。</p>

<p>添加选择</p>

<p>互斥通常很适合连续选择，因为如果用户的选择可能会轻易地滚动出屏幕，他就不可能看 见或者预测到他的动作会有什么结果。如果能够在一篇长文档中选择几个不连续的文本段落，
    或许这个操作是有用的，但它的操控性并不好。由于用户看不到所有正在操控的数据，因此可 能会很容易出现一些意料之外的变化。造成问题的根源是滚屏，而不是连续选择，但多数管理 连续数据的程序都是可滚动的。</p>

<p>但是，如果在离散选择时关闭互斥，用户可以连续单击对象来选择多个独立对象，我们称 之为添加选择 （additive selection) 。例如，列表框可以允许用户随心所欲地做出多项选择，并 在第二次单击时取消选择。</p>

<p>多数离散选择系统默认情况下采用互斥机制，只有使用元键时才允许添加选择， Shift 最常 用， Ctrl 其次。例如在画图程序中，单击选择一个图形对象后，你可以用 Shift 元键加单击，在 你的选择中增加其他对象。</p>

<p>连续选择系统通常不允许添加选择（至少缺乏总体视图来对添加选择进行管理)，但连续选 择界面可以对选择方式加以扩展，这里元键再一次发挥作用。在 Word 软件中，先选择第一个对 象后，对第二个对象按住 Shift
    键进行单击，可以选择第一个对象和第二个对象之间的所有内容。</p>

<p>某些列表框以及 Windows 的文件视图（两者都是离散数据的例子）中的添加选择则有点奇 怪。它们用 Ctrl 键实现 “ 正常 ” 的离散添加选择；但又用 Shift 键来 “ 扩展 ” 选择，仿佛它们是
    连续的数据，而不是离散的。多数情况下，这种映射徒增疑惑，因为这与离散数据添加选择的 习惯用法相矛盾。</p>

<p>成组选择</p>

<p>单击和拖动（ click-and-drag) 操作，也是成组选择的基础。对于连续数据，它意味着从鼠 标按下到鼠标释放都属于 “ 扩展选择 ” 。这也可通过元键调整，例如在 Word 中 CtrR 单击选择 一个完整的句子，那么
    Ctrl+ 拖动就可以逐句选择。独占式应用程序应该使用这些合适的变体来 丰富它们的交互。只要这些变体的操作简单，经验丰富的用户最终会记住和使用它们。</p>

<p>在离散对象的集合中，单击并拖动的操作通常会触发一个拖放移动（ drag-and-drop-move) 动作。如果鼠标按键是在两个对象之间单击，而不是在任何一个特定对象上，就有一种特殊的</p>

<p>390<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00293.jpg"/></p>

<p>拖动矩形的大小是动态变化的，它的左上角是鼠标被按下的位置，其右下角是鼠标释放的 位置。当鼠标释放时，包含在拖动矩形内的任何对象都作为一组进行选择。</p>

<p>含义。它产生了一个如图 18-17 所示的拖动矩形 （drag rectangle )。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00293.jpg"/></p>

<p><font size="2">图</font> 18-17 <font size="2">当鼠标按下时，光标不在任何特定的对象上，单击和拖动就产生一个拖动矩形。鼠标释放后包含在矩形里的
    任何对象都被选定。画图程序和许多文字处理器的用户可能很熟悉这个习惯用法。这个例子取自</font> Windows <font size="2">中的文件浏 览器，在同一个文件夹里选择文件。矩形从左上角被拉至右下角。</font>
</p>

<p>选择的视觉提示</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00277.jpg" width="54"/></p>

<p>必须清晰、醒目地向用户指出选中的对象。选中状态在拥挤的屏幕上必须容易辨认、清晰 , 并且不能使对象通常可见的细节变得模糊。</p>

<p>设计原则</p>

<p>要让选中这种状态，在视觉上明确而醒目。</p>

<p>特别是，你必须确保用户能轻易地辨别哪些项目已经选定，哪些项目没有选定。仅仅让人 能看出项目不同是不够的。必须记住，有相当一部分的人是色盲（译注：或色弱），所以不能单 纯用颜色区分不同选择。</p>

<p>过去，反色被用来表示选择已经完成（比如黑像素变成白色、白像素变成黑色）。尽管这样 在视觉上很明显，但实际上不一定容易辨识，尤其是在全彩界面上。还有一些其他的手段，比 如背景变成彩色、勾勒出边框、伪 3D 凹陷、控制柄（
    handles) 、动画选取框等。</p>

<p>在图形、绘图、动画，以及演示处理软件中，使用者与视觉丰富的对象打交道，所做的选 择很容易迷失。最好的解决之道是添加选择提示，而不是仅仅通过变换被选中对象的视觉属性。 很多作图软件中都釆用了 “ 控制柄 ”
    这一方式：用一个围绕在被选中对象上的框来表示目前所</p>

<blockquote>
    391
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>选择的物体。</p>

<p>对于不规则形状的选择（很多图形处理软件中都会遇到，比如 Adobe Photoshop ),控制柄 会有些令人迷惑，甚至产生混乱，容易迷失。在这里可以通过运动让选择一直都可以显而易见， 无论什么颜色。</p>

<p>Macintosh 上首批应用之一的 MacPaint ，有一个很好的习惯用法：用简单的虚线描画出被 选对象的轮廓，所有的虚线围绕对象同步移动。虚线看上去就像一队蚂蚁，因此这种效果赢得 —
    个形象绰号：行进中的蚂蚁。今天，这种方式也叫作选取框（ marquee ),以前电影院的招牌 也有这种类似的效果。</p>

<p>Adobe Photoshop 运用此习惯用法显示选中的图画区域，效果很好（专业级用户可以用键盘 让它们出现或者消失，这样他们可以没有任何干扰地观察对象）。虽然这个动画并不难实现，但
    要小心运用，才能得当，用得好的话，无论背景密度多高，颜色多复杂，都没有问题。</p>

<p><span id="filepos0002050324"></span></p>

<p><font size="5">插入和替换</font></p>

<p>前面我们谈到，选择表明了用户将要在哪个对象进行下一步操作。如果新建或者粘贴数据、 对象（或通过键盘输入或粘贴命令 ) ，则已经被选中。在离散选择中，选中一个或多个离散对象 ,
    输入的数据交给选中的离散对象，它们各自以自己的方式处理数据。这可能会产生一种替换 (replacement) 动作，即输入的数据取代所选对象，或者所选对象将输入的数据作为素材来完成 某种标准功能。例如在 PowerPoint
    中，如果选择了一种形状，键盘输入的文本就会成为所选形 状的文本注释。</p>

<p>但在连续选择中，输入的数据总是会替换掉当前选中数据。当你在一个文字处理器或文本 输入框中输入，输入的字就会替换所选的文本。连续选择还有个特殊倾向：选择能简单明了地
    表明连续数据两个元素之间的位置，而不是数据中某一特定元素。两个元素之间的位置被称为 插入点 （insertion point) 〇</p>

<p>在文字处理器中，插入符号（ caret)( 通常是一小段闪烁的黑色垂直线光标，用来表明下一 字符所在的位置）表明文本中两字符之间的位置，而实际上它并没有选择两个字符中的任何一
    个。通过指向和单击任何其他地方，你可以轻易地移动插入符号。但如果你拖动以扩展选择， 插入符号就会消失，并换成文本的连续选择。</p>

<p>电子表格中也使用连续选择，但它的实现与文字处理器有些不同。单元格组成一个连续的数 据矩阵，所以选择是连续的，但是没有选择两个单元格之间空间的说法。在电子表格中，单击就
    是选择整个单元格。在电子表格中通常也没有插入点的说法，尽然这样的设计可能会很吸引人（也</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p align="right" height="2em" width="0pt">就是说，选择两个垂直相邻的单元格顶部和底部之间的线，然后插入一行或填充一个单元格)。</p>

<p>将这两个习惯用法混合也是可能的。 PowerPoint 中的幻灯片的浏览视图允许选择插入点， 但单幅幻灯片也能选择。如果你在幻灯片上单击，你就选定了那张幻灯片，但如果你在两张幻 灯片之间单击，就会出现一个闪烁的插入符号。</p>

<p>如果应用程序支持插入点，就必须通过单击和拖动来连续选择对象。即使只是选择文字处 理器中的一个字符，也必须拖动鼠标经过它。这就意味着用户在使用应用程序的正常过程中，
    将要做很多单击和拖动的动作，其副作用是使任何拖放习惯用法更难表达。你可以在 Word 中 体会到这些，在 Word 中拖放文本首先涉及一个单击和拖动操作以做出选择，然后鼠标回到被 选文本，再次单击和拖动进行实际移动。做同样的事，
    Excel 让你在所选单元格的边界发现特 殊的受范区（仅一两个像素宽）。为了移动一个离散选择，用户必须在单个动作里完成对对象的 单击和拖动。在字处理软件中，为了减轻单击并拖动的负担，可以采用一些其他的直接操作方
    式，比如用双击来选择一个单词。</p>

<p><span id="filepos0002054980"></span></p>

<p>拖放</p>

<p>在所有直接操作习惯用法中，拖放操作是最具有 WIMP 图形用户界面特点的：单击并按住 鼠标按键，在屏幕上移动对象，之后在适当位置释放。令人奇怪的是，拖放的应用并不像我们 想象的那样广，而且它的确没有实现其所有的潜能。</p>

<p>特别是在 Web 流行，以及和 Web 类似的行为成为超级易用性的同义词后，更妨碍了拖放 在桌面系统上的发展，因为开发人员错误地在其他不合适的场合中模仿着 Web 浏览器的交互方 式。幸运的是， Web
    技术被重新定义了，程序员可以在浏览器中提供丰富的拖放动作，尽管仍 然有些挑战，但似乎那些适合所有平台的丰富的具有表现力的习惯用法正在苏醒。</p>

<p>我们可以将拖放定义为 “ 单击一个对象，并将它移动到另一个位置”。但对概括一个如此广 泛的习惯用法来说，这个定义有些狭窄。对拖放更精确的描述是：单击某个对象，移动它，意 味着即将发生一种变换。</p>

<p>Macintosh 是第一个成功提供拖放的系统。它引发人们对这个习惯用法的许多期望，但这 些期望因为两个简单的原因一直没有实现。首先，拖放不是一个系统范围内的工具，而是 Finder 应用的一个副产品。其次，当时 Mac
    只是单任务计算机，在应用程序之间进行拖放这个课题多 年没有浮现出来。</p>

<p align="right" height="6pt" width="0pt">要感谢苹果公司，他们在第一版用户界面标准指南中对拖放做了概括。而在另一面，微软 不仅没有在早期 Windows
    版本中使用拖放，甚至没有在程序文件中描述它的过程。但是，微软</p>

<p align="right" height="1em" width="0pt">393</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00023.jpg"/></p>

<p>About Face 4 :交互设计精級</p>

<p>最终迎头赶上，并且开拓了一些新的用法，比如活动工具栏 （movable toolbar )和可停靠工具 板（ dockablepalette )。</p>

<p>我们一般使用 “ 直接操作 ” 这个短语来描述所有的 GUI 交互习惯用法，但是 “ 拖放”这种 操作中却有两个层次。第一种拖放是真正的直接操作习惯用法，拖放动作是把某个对象放在某
    处，比如在不同目录间移动文件、在特定应用中打开一个文件（把某一个文件图标拖放在一个 应用的图标上），或者在绘图软件中的画布上组织对象等。</p>

<p>第二种类型的拖放就有些间接了：使用者为了执行某项功能而把一个对象放在一个特定的 区域或者另一个对象上。这样的习惯用法并不太多见，但是可能会很有用。在 Mac OS X 中的 Automator 工具中就有一个这样的好例子（参见图
    18-18 )。</p>

<p height="0pt" width="0pt"><font size="5">BOO</font></p>

<p><font size="2">Q 2014 Franklin</font> <u>丨_皮</u> ▼丨 <font size="2">...</font> 索 <font size="2">'</font> 色</p>

<p height="0pt" width="0pt"><font size="5">FAVORITES</font></p>

<p><font size="2">^ Dropbox n All My Fi..</font></p>

<p><font size="2">^ AirDrop ^ Applicat... £3 Desktop 01 Docume... o Downloads H Movies Musk Pictures</font> <font
        size="2">dmc.20141013_04</font></p>

<p align="center" height="0pt" width="0pt">2pna</p>

<p align="center" height="0pt" width="0pt"><font size="1">dmc_20141013.04</font><br/>
    <br/>
    <font size="2">IJPfl</font></p>

<p align="center" height="0pt" width="0pt"><font size="1">dmc_20141013_05</font></p>

<p align="center" height="0pt" width="0pt"><font size="1">5JP«</font></p>

<blockquote>
    <font size="2">图</font> 18-18 <font size="2">苹果</font> MacOSX <font size="2">中的</font> Automator <font size="2">工具可以让使用者创建通用的工作流，比如重新命名图片等，之后就会表现
    为一个图标。然后，使用者就可以把文件或者文件夹拖放在这个工作流图标上，来执行创建好的这个功能</font> u <font size="2">所以，严格
    来讲，这并不是直接操作，而是提供了一种合情合理的直接方式来调用命令。</font>
</blockquote>
<p>拖放的视觉反馈</p>

<p>我们先前讨论过了，界面必须为它的受范性提供视觉暗示，或者是静态的——通过外形的 绘制表现出来，或者是主动的 —— 在光标通过时有动画显示。某个对象可以被拖动这种习惯用
    法很容易被使用者学会，使用者也很难忘记某个图标、被选中的文本或者其他明显的对象是可</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>以被直接操作的，但是他可能会忘记这个操作动作的细节，因此在使用者点击了对象、开始拖 曳之后，提供反馈是非常重要的。新手或生手要进行这样的操作时，基本上都会需要这样的帮 助（比如，内嵌在界面中的文本暗示 )
    。温顺宽厚的交互方式会允许使用者撤销（ Undo ),可以 鼓励使用者毫无畏惧地去尝试直接操作。</p>

<p>一旦用户在某个对象上单击鼠标按键后，那个对象就成为拖放过程中的源对象。当用户按 住鼠标移动的时候，光标会经应用内部或者外部的一系列对象。如果这些对象支持拖放，它们 就可能是目标对象，称为拖放候选对象 （drop candidate
    ),在一次拖放动作中可能只有一个源对 象和一个目标对象，但是可能会有多个拖放候选对象。</p>

<p align="right" height="6pt" width="0pt"><img align="baseline" alt="" height="75" src="../Images/Image00170.jpg"
                                               width="54"/></p>

<p align="right" height="0pt" width="0pt">每个拖放候选对象的唯一任务是当捕获光标的热点经过它上方时出现视觉提示，这意味着 当使用者释放鼠标按键时，它可以接受这个 “ 放 ”
    的动作，至少也要表示出它理解了这个动作。</p>

<p>设计原则</p>

<p>拖放候选对象必须在视觉上表明它们的接受能力。</p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00261.jpg" width="54"/></p>

<p>有一种较差的提供拖放接受能力的视觉表现方式，就是改变光标。光标的首要任务是要把 被拖动对象表示出来。因此，最好是将对所有拖放候选对象的指示留给拖放候选对象本身。</p>

<p>设计原则</p>

<p>拖动光标必须在视觉上表明源对象。</p>

<p>不混淆这两种视觉功能很重要。不幸的是，微软在 Windows 中就犯了这个错误，它使用光 标暗示来表示某个对象不是一个拖放目标。这种决策考虑更多的是容易编码，而不是设计。在
    显示拖放接受能力方面，改变光标比突出显示拖放候选对象要简单得多。光标代表的是主体， 也就是被拖动的对象，而不应该用于表示拖放候选对象。</p>

<p>这好像还不是最坏的，微软还用讨厌的带斜杠的圆形进行光标暗示，通常这个图标表示“禁 止 ” 。这个图标是一个让人不愉快的习惯用法，因为它告诉用户不能做哪些事情。这是一种负面 反馈。用户容易误解为： “
    现在不要释放鼠标，不然将有无法挽回的损失 ” ，而不会理解为“释 放鼠标，不会有什么事情发生 ” 。无论微软的风格指南如何解释，把表示禁止的符号添加到光标 暗示中，这是两种较差习惯用法的糟糕组合，应该避免使用。</p>

<p>在用户最后释放鼠标按键后，当前的拖放候选对象就成为目标对象。如果用户在有效的拖 放候选对象之间，或无效拖放候选对象上释放鼠标，那么就没有目标对象，拖放操作结束，不
    做任何动作。声音或视觉上没有变化，是表示这种结果的好方式。确切地说，它不是一种取消，</p>

<p align="right" height="2em" width="0pt">395</p>

<p>About Face 4 : 交互设计精 SI</p>

<p>所以也就不需要显示取消符号。</p>

<p>指示拖动受范性</p>

<p>用主动光标来暗示拖动受范性，是有问题的。在日益面向对象的世界里，能够拖动的事物 越来越多。光标闪烁和迅速变化更多的是造成了视觉混乱，而不是帮助。这里有个好的解决方 法，我们可以假定事物能拖动，然后让用户体验。这种方法在 Windows
    浏览器和 Macintosh Finder 的窗口中获得了成功。没有光标暗示，拖动受范性可能是一种难以发现的习惯用法，所 以你可以考虑在界面中建立一些其他指示，如文本暗示或者工具提示那样的弹出菜单。</p>

<p>在选择好源对象开始拖动操作后，必须有某些视觉指示。视觉上最生动的方法是使拖动操 作完全活动起来，实时显示整个源对象的移动。</p>

<p>但是，这种方法难以实现，速度太慢，所以很可能不是一个恰当的解决方案。问题在于源 和目标操作需要相当精确的指针。例如，源对象也许有六平方厘米，但它必须拖放到只有一平
    方厘米的目标对象上。源对象不能模糊目标对象，因为源对象大到横跨多个拖放候选对象，我 们需要用光标热点精确显示它将拖放到哪个拖放候选对象上。这就是说，在源和目标操作中，
    拖动源对象的透明轮廓比拖动源对象完全动画的精确图像要好得多。同时这也意味着被拖动对 象不会使正常的箭头光标模糊。箭头尖端仍需指示确切的热点。</p>

<p>拖动轮廓对大多数重新定位也是适合的，因为轮廓相对源对象移动时在原始位置仍然可见。</p>

<p>指示拖放候选对象</p>

<p>当光标带着源对象的轮廓在屏幕上移动时，经过一个又一个的拖放候选对象。这些拖放候 选对象必须在视觉上显示它们已经意识到自己正被当做可能的拖放目标。通过视觉改变，拖放
    候选对象提醒用户它能够正确处理拖放的对象。（当然这也需要软件必须足够聪明，能够识别出 那些 “ 源 - 目标 ” 组合。）</p>

<p>通常来说，只有当前可见的对象才可能是拖放候选对象，这一点是显而易见的。并且，一个 正在运行的应用在不可见的情况下，没有必要可视化地显示它能够成为目标对象。实际上，同时
    出现在屏幕上的对象数目不会太多，最多二十几个，这意味着实现起来不会有太大的问题。</p>

<p>插入目标</p>

<p>在有些应用当中，源对象可以被释放并落在其他对象之间的位置。在 Word 中拖放文本便 是这样的操作，数据组或者列表中的重新排序也是这样的操作。在这些情形中，就需要一种特 殊的视觉暗示出现在程序的背景或者连续数据中：插入目标
    （insertion targets )。</p>

<p>在 PowerPoint 的幻灯片浏览视图 （slide sorter) 中重新排列幻灯片，就是这类拖放的一个<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>典型例子。用户可以选择一幅幻灯片，并将它拖动到不同的位置。在拖动时，插入目标在幻灯 片之间出现（一个垂直的黑条，看上去像大的文本编辑符号）。当你拖动文本时， Word 也会显
    示一个插入目标。不仅加载光标会显现出来，你还可以在两个相邻字符之间看见一个垂直的灰 条，灰条显示了精确插入拖放文本的位置。</p>

<p>无论是把什么对象拖放到其他对象之间，程序必须显示一个插入目标。就像源和目标拖放 中的拖放候选对象一样，程序必须在视觉上显示拖动的对象可以在什么地方放下。</p>

<p>完成时的视觉反馈</p>

<p>如果源对象被拖放在一个有效的拖放候选位置，适当的操作就会发生。这时最重要的就是 要将操作已发生这个事实，在视觉上表达出来。例如，你把一个文件从一个目录中拖到另一个
    目录下，源对象必须要在源位置上消失，而出现在目标位置上。如果目标对象代表功能，而不 是容器（例如打印功能对应的图标），图标必须在视觉上标示出它接收了拖放，并且正在打印。 我们可以使用动画或视觉状态的改变来实现。</p>

<p>自动滚屏</p>

<p>当选中的对象拖出应用软件的边界时，软件怎么办？对象正被拖动到一个新位置，但新位 置是在应用程序之内还是之外呢？</p>

<p>以 Microsoft Word 为例，当一段选中文本拖动到可见的文本窗口之外时，用户是说“我想</p>

<p>将这段文本放到另一个程序中 ” 还是 “ 我想将这段文本放到同一文档的其他位置，但这一位置 目前不在屏幕当中？ ” 如果是前者，我们可按前面讨论过的继续。但如果用户期望的是后者， 应用程序则必须朝着拖动的方向自动滚屏（
    auto-scrolling), 定位到一定距离的位置，而不是同 个文档中当前可见的位置。</p>

<p><img align="baseline" alt="" height="68" src="../Images/Image00273.jpg" width="54"/></p>

<p>自动滚屏是拖放操作重要的补充。当你实现一个操作时，可能不得不借助另一个操作。无 论拖放的目标对象是否在屏幕之外，程序都需要自动滚屏。</p>

<p>任何可滚动的拖放目标对象都必须支持自动滚屏。</p>

<p>在早期的实现中，如果你拖到应用程序窗口之外，自动滚屏就起作用。这样有两个致命的 缺点。首先，如果应用的窗口已经充满整个屏幕，如何才能拖放到窗口之外？其次，如果你想 拖动对象到另一个程序，应用程序该如何分辨这种情况与自动滚屏呢？</p>

<p>针对这个问题，微软开发了非常聪明的解决方法。基本上，滚屏开始于离应用程序的边界</p>

<p>About Face 4 :交互设计精髓</p>

<p>内较近的位置，而不是到边界外才开始自动滚屏。当拖动光标靠近可滚动窗口的边界时一一但 仍然在窗口内一 ~ 朝着拖动方向的滚屏就开始了。如果拖动光标来到文本区底部的 30 个像素左 右的位置时， Word
    开始向上滚动窗口内容。如果拖动光标接近文本区顶部边界的同样位置时， Word 就向下滚屏。</p>

<p>近来，有一些开发人员共同开发出了一个自动滚屏的变体，如图 18-19 所示，当光标距窗 口边界越近，自动滚屏的速度越快。例如，当光标距离上边界有 30 像素的距离时，滚屏速度为 每秒一行，当距离为 15
    像素时，滚屏速度就变成了每秒两行，依此类推。这让使用者可以方便 地控制自动滚屏，在很多场合下都很有用。</p>

<blockquote>
    暴
</blockquote>

<blockquote>
    <i>B BMMB</i> QisMsll
</blockquote>

<p align="center" height="0pt" width="0pt">l!M*Esiils<br/>
    <br/>
    pliiIBs</p>

<blockquote align="right" height="0pt" width="0pt">
    ■iBilaa lIslsa.
</blockquote>

<p align="center" height="0pt" width="0pt">MHiiiBil</p>

<p><font size="2">高速自动滚屏区 中速自动滚屏区 低速自动滚屏区</font></p>

<blockquote>
    <font size="2">图</font> 18-19 <font size="2">本图中表现了变速滚屏的概念，可以运用到</font> Windows <font size="2">浏览器中。不幸的是，滚屏如果只有固定速度，就会难
    以控制。当光标越来越接近边界的时候，滚屏速度就会越来越快（所以应该对最快速度有一个限制，速度太快了对谁都 没有好处）。微软做得很好，当光标接近封闭的滚动框内边界时，而不是外边界，才发生滚动，自动滚屏的这个做法的
    确非常聪明</font> u
</blockquote>
<p>自动滚屏需要的另一个重要细节是时间延迟。如果光标一进入边界周围的敏感地带，就立 即幵始自动滚屏，那么对于动作慢的用户，就太容易在无意中启动自动滚屏。为了防止这种事 情发生，应该只有在拖动光标进入自动滚屏敏感带时，对时间进行合理缓冲后
    —— 约半秒 —— 再开始启动。</p>

<p>如果用户拖动光标，完全超出 Word 的可滚动文本窗口时，就不会发生自动滚动。相反， 重新定位操作会在非 Word 的其他程序中结束。例如，如果拖动光标离开 Word 进入 PowerPoint ，
    当用户释放鼠标按键时，选中的对象就会粘贴到鼠标指定位置的 PowerPoint 幻灯片中。进一步 , 如果拖动光标移动到 PowerPoint 编辑窗口任意边界的 3 到 4 毫米以内， PowerPoint 就会朝合适</p>

<p>398</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>的方向自动滚屏。这是个非常方便的用法，因为当前屏幕的限制，我们会发现自己经常拖着一 个加载的光标，却没有地方可以放置拖动的内容。</p>

<p>避免拖放抖动</p>

<p>当一个对象既可以被选择、又可以被拖动时，鼠标偏向于选择操作，这非常关键。因为单 击时光标不偏移一两个像素非常困难，频繁地选择某物的动作，一定不要让程序错误地把该动
    作理解为拖放的开始。用户很少想在屏幕上拖动一两个像素。（就算是在一些作图软件里，用户 可能真的想仅仅移动一两个像素，还是有必要让用户多花费一点点力气来操作，这样可以避免 频繁的不必要的重新定位。）</p>

<p>在硬件方面，像按键那样的控件，有机械接触时就会表现出工程师称之为颤动（ bounce) 的特性，即当有人按压开关的小金属触点，它们就会颤动。对于门铃这样的电路，颤动花去几
    个毫秒不会有什么关系。但在现代的电子仪器中，这种额外的点击问题明显。对于音响的开关 电路，如果它可以处理这种发生在第一次操作后几毫秒内的颤动，就可以避免了我们打开音响
    后的千分之一秒后又将它关闭的现象。这种情况和鼠标过分敏感的问题有点像，解决的方法也 模仿这样的开关电路，使鼠标去颤动（ debounced )。</p>

<p>为了避免这种情况，软件应该建立拖动阈值（ dragthreshold) 。除非移动超过最小阈值，比 如说 3 个像素，否则，忽略掉鼠标按下事件后的所有鼠标移动消息。这就提供了一种保护机制，
    避免无意中激活拖动操作。如果用户能够保持鼠标按键在按下位置的 3 个像素之内，整个的单 击动作就被视为选择命令，而所有小幅度的、无意识的移动将被忽略，对象不再颤动。鼠标移 动一旦超过 3 个像素的阈值，程序就变为拖动操作，如图
    18-20 所示。无论什么情况下对象选 择或者拖动时，拖动操作都应该去颤动。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00338.jpg"/></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图18-20能够同时被选择和拖动的任何对象，都必须去颤动。当用户单击对象，动作必须解释为选择，而不是拖动，
    即使是用户在单击和释放期间不小心将鼠标移动了一两个像素的距离。程序也必须忽略任何鼠标移动，只要它待在不受 约束的距离（每个方向不超过3个像素）•从鼠标被按下的坐标位置移动超过3个像素，就会变成拖动操作，对象也被
    认为处于操作中。这被称作的拖动阈值。</p>

<p><br/>
    <br/></p>

<blockquote>
    399<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00117.jpg" width="55"/></p>

<p><img align="baseline" alt="" height="155" src="../Images/Image00167.jpg" width="151"/></p>

<p>某些应用程序可能需要更复杂的拖动阈值，例如 3D 应用常需要支持屏幕上三个轴上移 动的拖动阈值。还有一个例子是我们为客户设计的报表生成软件。用户可以通过水平拖动来 重新定位报告中的各栏。例如，它可以将 “ 姓 ”
    从列表中的任何位置拖动，重新定位到“名 字 ” 的后面。到目前为止，这是最常用的拖放习惯用法，还有另一个不常用的拖动操作，这 种操作允许将某一栏中的值直接插入到另一栏中，例如，地址栏和州名栏（图 18-21 )。</p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">所有拖动都要去颤动:,</p>

<p><font size="2"><font color="#FFFFFF">Address</font></font> <font color="#FFFFFF">广</font></p>

<p><font size="1"><font color="#FFFFFF">342 Easton Lane 339 Disk Drive 83 Elm —</font></font></p>

<p><font size="1"><font color="#FFFFFF">9348 N. Blenheim 1003 Water St.</font></font></p>

<blockquote>
    <font size="2"><font color="#FFFFFF">Name</font></font>
</blockquote>
<blockquote>
    <font size="2"><font color="#FFFFFF">1</font></font> <font size="1"><font color="#FFFFFF">Ginger Beef</font></font>
</blockquote>
<blockquote>
    <font size="2"><font color="#FFFFFF">2</font></font> <font size="1"><font color="#FFFFFF">C.U. Lator</font></font>
</blockquote>
<blockquote>
    <font size="2"><font color="#FFFFFF">3 Justin Case</font></font>
</blockquote>
<blockquote>
    <font size="2"><font color="#FFFFFF">4 Creighton Barrel</font></font>
</blockquote>
<blockquote>
    <font size="2"><font color="#FFFFFF">5 Dewey Decimal</font></font>
</blockquote>
<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;

            <blockquote>
                <font size="2"><font color="#FFFFFF">Name</font></font>
            </blockquote>

            <p><font size="2"><font color="#FFFFFF">I Address</font></font></p>

            <blockquote>
                <font size="2">1 Ginger Beef</font>
            </blockquote>

            <blockquote>
                <font size="2">342 Easton Lane Waltham</font>
            </blockquote>

            <blockquote>
                <font size="2">2 C. U. Lator</font>
            </blockquote>

            <blockquote>
                <font size="2">339 Disk Drive Borham</font>
            </blockquote>

            <blockquote>
                <font size="2">3 Justin Case</font>
            </blockquote>

            <blockquote>
                <font size="2">83 Elm Alboin</font>
            </blockquote>

            <blockquote>
                <font size="2">4 Creighton Barrel</font>
            </blockquote>

            <blockquote>
                <font size="2">9348 N. Blenheim Five Island</font>
            </blockquote>

            <blockquote>
                <font size="2">5 Dewey Decimal</font>
            </blockquote>

            <blockquote>
                <font size="2">1003 Water St. Freeport</font>
            </blockquote>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 18-21 <font size="2">这个报表生成软件有一个有趣的特点，它能够通过拖放操作，将一栏中的内容插入到另一栏中。这种直接操
    作行为与常用的对各栏重新排序的拖放操作（比如将城市栏移到地址栏的左侧）相冲突。我们使用一种特殊的双轴拖动 阈值来解决这个矛盾。</font>
</blockquote>
<p>我们想遵照用户的心理模型，让他们可以进行这种叠加操作，将一栏的值拖动到另一栏中。 但是这种操作与单纯的各栏水平重新排序相冲突。我们通过区分水平拖动和垂直拖动来解决该
    问题。如果用户将某栏向左或右拖动，就意味着他将该栏作为一个单元重新定位。如果用户上 下拖动某栏，则将该栏的值插入到另一栏。</p>

<p>因为水平拖放是用户的主要动作，而垂直拖放较少，所以我们将拖动阈值向水平轴倾斜。 我们创建了如图 18-22 所示的线轴形区域取代了方形区域。设定水平移动阈值为 4 个像素，它
    不会将大的移动误认为用户正常的水平移动，同时仍可避免用户不经意的垂直移动。为了确认 极少用的垂直移动，用户必须沿垂直轴移动 8 个像素，并且左右偏离不超过 4 个像素。这个动</p>

<p>400<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>作相当自然，也容易学习。</p>

<p>这种轴向不对称的阈值在其他方面也能用到。 Visio 用了一个相似的习惯用法区分画直线和 曲线。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p>解释为垂直移动</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00325.jpg"/></p>

<p>8像素</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图18-22在这个软件中，这种线轴形的拖动阈值在水平上允许偏差。迄今为止，在这种应用中，水平拖动是最常用的
    拖动类型。这种拖动阈值使用户很难不经意地开始垂直拖动。但是，如果用户确实想垂直拖动对象，一个无论是向上还 是向下的明显活动都将导致程序在极小附加工作的情况下确认这种垂直模式。</p>

<p><br/>
    <br/></p>

<p>精确滚动</p>

<p>作为一个精确的指向工具，鼠标的缺陷显而易见，特别是在画图程序中拖动对象的时候。 要想将一个对象拖动到确切的位置上非常困难，特别是当显示屏的分辨率为每英寸 72 个像素 时，而鼠标以 6 比 1
    的比例在显示屏上移动时。为了移动光标一个像素，必须精确地将鼠标移 动五百分之一英寸，这不容易做到。</p>

<p>解决这个问题的方法就是添加精确滚动 （fine scrolling) 功能，用户可以迅速地转换到这种 模式，允许以鼠标为基础的对象操作达到更高的分辨率。在拖动期间，如果用户认为他需要更
    精确的调整，就可以改变鼠标移动与显示屏上对象移动的相对比值。任何要求精确对齐的程序</p>

<blockquote>
    401<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00197.jpg" width="54"/></p>

<p>必须提供精确滚动。这至少包括所有绘图和绘画程序、演示文稿程序和图像操作程序。这种习 惯用法有几种不同的变体。可以在拖动操作期间，按下元键，鼠标改变成游标模式。在游标模 式时，鼠标每移动 10 个像素，对象会移动一个像素。</p>

<p>设计原则</p>

<p>任何要求精确对齐的程序必须提供精确滚动的游标工具。</p>

<p>另一个有效的方法是在拖动操作期间激活箭头键。维持鼠标按键按下的状态下，用户可以 操控箭头键将所选对象向上、下、左或右每次各移动 1 个像素。释放鼠标按键时，拖动操作将 立即终止。很多 “ 单像素 ” 的应用，例如 Adobe
    Photoshop 允许用户移动键盘上的箭头键按照 每次 1 个像素来移动所选对象，如果按住 Shift 键则可以一次移动 10 个像素。</p>

<p>这样的游标存在一个问题，那就是释放鼠标的简单动作常会使用户的手移动一两个像素， 导致在这个瞬间放置的对象偏离了对齐。这种问题的解决方法是在接受第一个游标按键时，使 鼠标不敏感，也就是使鼠标忽略在某个合理阈值（如 5
    个像素）内的所有后继移动。这就意味 着用户可以利用鼠标开始粗略地移动，然后利用箭头键精细地确定终止位置，而且在释放鼠标 时也不会干扰位置。如果用户希望在游标开始后，做额外的粗略移动，他只需将鼠标移动超过
    阈值，系统就将脱离游标模式。</p>

<p>如果箭头键不是在界面中，如在画图程序中，它们能用于控制所选对象的游标移动，这意 味着用户不必维持鼠标按键按下的状态 。Adobe Illustrator 、 Photoshop 及 PowerPoint 就是这样。 在
    PowerPoint 中，箭头键将所选对象在网格中移动一步 —— 在默认网格的设置状态下，一步约 为 2_ ，如果在使用箭头键的同时按住 Alt 键，每按下一次箭头键，对象移动一个像素。这样 做相当不错。</p>

<p><span id="filepos0002102478"></span></p>

<p>控件操作</p>

<p>控件（ control) 是现代图形用户界面的基础，关于这一点，我们将在第 21 章中详细讨论。 本节中，我们先谈谈直接操作中的一些控件所必需的鼠标交互。</p>

<p>许多控件的操作，尤其是菜单，需要的不仅仅是单击，实际上是相对复杂的 “ 单击并拖放 ” 的操作。这个直接操作对用户要求更高，因为它结合了粗略动作与精细动作来单击、拖动和释
    放鼠标。尽管菜单使用频率不如工具栏控件高，但它仍然是我们经常要用到的，特别是新手用 户或者生疏用户。因此，我们发现， GUI 设计的难题之一是：菜单是初学者主要的操作控件， 而从物理操作性方面来看，它又是一个很难操作的控件。</p>

<p>402<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>除非提供其他的习惯用法来完成同样的任务，否则没有什么办法可以解决这个问题。如果一 种功能可以通过菜单访问，并且用到的次数较多，则需要提供激活此功能的其他习惯用法一那 些不需要进行单击 - 拖动操作的习惯用法，比如工具条按钮。</p>

<p>这里有个好办法，我们可以用一系列的单击来操作菜单，而无须单击和拖动 。Mac OS 就 采用了这种做法，单击菜单，它就向下展开。当指向你所期望的菜单项时，单击一次就可以选
    择和关闭菜单。微软进一步扩展了这种理念，你在任何菜单上一单击，程序就转换为菜单模式 (menu mode) 。处在菜单模式时，应用中所有的一级菜单及这些菜单中的所有项都处于激活状
    态，就像你在进行单击和拖动一样。当你移动鼠标时，无须使用鼠标键，相应的每个菜单就会 向下展开。</p>

<p>模态工具和工具板</p>

<p>正如本章前面讨论过的一样，使用模态工具 （modal tools) 时，用户从工具板 （tool palette ， 也称为工具箱、调色板）中选择一种工具，此时，应用程序的显示区完全处于这种工具的模态
    中，即应用程序只支持该工具的工作。通常应用程序会改变光标的外形，来表明当前激活的是 什么工具。</p>

<p>当用户在画图区域使用工具单击和拖动时，工具就开始工作。例如，如果激活的工具是喷 枪 （spray can), 应用软件就进入了喷枪模态，只能完成喷墨的工作。工具可以反复施用，按需
    喷墨，直到用户选择其他工具。用户如果希望在画图中使用其他工具，比如橡皮擦（ eraser), 则必须回到工具板，选择橡皮擦工具。然后应用软件就进入了橡皮擦模态，在选择别的工具之
    前，应用软件只能擦除对象。调色板中通常会提供光标选择工具，使用户可以将光标回复到用 于选择的指针（ selection-oriented pointer) 状态 ，Adobe Photoshop 中就是如此。</p>

<p>模态工具既可以是在画图中执行动作的工具 —— 如橡皮擦，也可以是绘制形状的工具 —— 如椭圆。光标可以变成橡皮擦，擦除先前输入的任何东西，也可以变成楠圆工具，绘制多个新
    的椭圆。鼠标按下的事件就确定了形状的角度或中心（或是它的边界)，用户拖动鼠标可以把图 形拉伸到自己期望的大小和外形。鼠标释放事件则确认这次画图完成。</p>

<p>模态工具在 “Paint” 这样的应用软件中不会令人烦恼，因为其中的工具数量很少。而在更 高级的图形图像应用软件如 Adobe Photoshop 中，这种模态具有破坏性。因为随着用户能够熟
    练使用的光标和工具增多，花费在选择和改变选择工具上的时间和动作——也就是附加工作显 著增加。在这类图形图像应用软件中，模态工具提供了非常好的习惯用法来引导用户了解该应
    用程序的功能集，但对于熟悉复杂应用的熟练用户来说，模态工具并不太有效。幸好，像 Photoshop 这样的应用软件充分利用了键盘命令来满足超级用户的需求。</p>

<p>管理模态工具应用的难度，更多地来自工具的庞大数量，而不是模态本身。更确切地说 ,</p>

<blockquote>
    403
</blockquote>
<p>当用户工作时，使用工具的数量太多将会影响工作效率。超过 5 个模态工具就常常难以管理。 例如，如果 Adobe Illustrator 中的必要工具从 24 个下降到 8 个，它的用户界面问题就可能不至 于让用户觉得痛苦。</p>

<p>为了补偿模态工具数量太多的副作用，像 Adobe 川 ustrator 这样的产品采用元键来调节不同 的模态。 Shift 键常用于受约束的拖动，但在 Illustrator 中添加了很多不标准的元键，并且用了
    不标准的使用方式。例如，在拖动对象的同时按下 Alt 键，拖走的就是对象的副本，但 Alt 键 也可以将选择工具从单顶点（ single-vertex) 选择切换为对象选择。这两者之间的区别很微妙： 如果单击某物，然后按下 Alt
    键，你拖走的是副本。相反如果你先按下 Alt 键，然后单击某物， 你选择的是整个对象，而不是它的单顶点。但更令人迷惑的是，此时你必须先释放 Alt 键才能 拖动对象，否则拖走的就是该对象的拷贝。对于 “
    选择一个完整的对象，并将它拖动到新的位 置 ” 这样一件简单的事，你必须按住 Alt 键，再指向对象，进行单击，然后在不移动鼠标的前 提下按住鼠标键，先释放 Alt 键，将对象拖到目标位置！这些设计软件的人到底怎么是想的？</p>

<p>必须承认，这些可能的组合非常有用，但是它们难学、难记又难用。如果你是一个专业的 图形艺术家，每天要用 Illustrator 工作 8 个小时，你可以把这些缺点转变成优势，就像赛车手在
    跑道上能将难以驾驭的、精细调节过的汽车变成自己的优势一样。但 Illustrator 的临时用户会像 普通司机那样，由于工具超出自己的水平而屡屡受挫。</p>

<p>加载光标工具</p>

<p>使用加载光标 （charged cursor) 工具时，如果用户在调色板中选择一种工具或形状，光标 不会（在用户再次切换前）永久地切换到所选工具的光标形状，而是临时装载或加载了 （charged cursor)
    所选对象的单个实例。</p>

<p>此时如果用户在画图区域单击一次，在显示屏的鼠标释放点就会创建一个实例。加载光标 对于功能性操作来说不太好用（尽管微软将它无处不在地应用在 Format Painter 功能中），但它 确实很适合用于处理图形对象。例如，在
    PowerPoint 中它就得到了广泛应用。用户从图形工具 栏中选择一个矩形，光标就变成了负载一个矩形实例的矩形模态工具。</p>

<p>在许多使用加载光标的程序中，如 PowerPoint, 用户不能通过单击放下对象，而是必须拖 动矩形框来决定对象的大小。一些程序如 Visual Basic 中这两种方法都支持。单击一次加载光
    标将以默认的大小创建一个对象实例。创建新的对象后处于选择状态，控制柄（ handle )(我们 将在下面的 “ 调整大小和形状 ” 的小节中讨论）环绕着它，能立即精确地调整对象的形状和大
    小。毫无疑问，既允许单击创建默认尺寸的对象，又允许拖动矩形框定制对象大小的双重模式， 是最灵活和最明显的，能令多数用户满意。</p>

<p>有时使用加载光标的应用程序忘记改变光标的外观。例如 ，Visual Basic 在光标加载时，会</p>

<p>404</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>将光标变成十字准线，而 Delphi 则根本不做任何改变。如果认为光标这时是一种模态行为 —— 单击它会创建某物，则在视觉上指示这种状态很重要。加载的光标也要有合适的取消操作习惯 用法，按下 Esc
    键则是广泛使用的有效取消操作。</p>

<p><span id="filepos0002116318"></span></p>

<p>2D 对象操作</p>

<p>同控件一样，显示屏上的数据对象，特别是制图和建模软件中的图形对象，都能通过“单 击 - 拖动 ” 来操作。对象（不是在本章前面中讨论过的图标）依靠 “ 单击 - 拖动”完成三项主要 操作：调整位置、调整大小和形状，以及连接（
    repositioning 、 resizing 、 reshaping，and connecting )。</p>

<p>调整位置</p>

<p>调整位置（ repositioning) 是一种简单的行为 ® ，只需单击对象，然后将它拖动到新的位置。 关于调整位置，最重要的设计问题就是它侵占了其他直接操作习惯用法的使用空间。调整位置 这一功能需要使用单击 -
    拖动动作，致使这个动作不能再用于其他目的。对于应用内的某个具体 内容，这可能不是什么问题，因为就该具体内容而言，最常见的直接操作就是拖放。不过，对 于屏幕界面上的某个对象来说，这可能就是个问题了 。®</p>

<p>要解决这种冲突，最常用的方法是将对象的某个专门区域用于调整位置。例如，在 Windows 和 Macintosh 中你可以单击和拖动标题栏来调整窗口位置。窗口的其余部分不是调整位置的受 范区域，这样，正如你可能希望的，单击 -
    拖动习惯用法就可以用于窗口内的其他功能。窗口可 以拖动的唯一暗示就是标题栏的颜色，这种精妙的视觉暗示纯粹是习惯用法，不能用直觉理解。 但它非常有效，证明了基于习惯用法的界面设计的有效性。</p>

<p>总之，你需要为受范区域提供更清楚的视觉暗示。例如，标题栏可以用亮度的轻微变化作 为受范暗示，或者可以用光标暗示。</p>

<p>要想移动对象，首先必须选择它。这就是选择必须发生在鼠标按下时的原因：用户可以用 拖动，而不是先单击后释放来选择对象，接着用单击 - 拖动来调整位置，这样比简单单击然后拖 动到希望的位置更自然。</p>

<p align="right" height="6pt" width="0pt">对于移动连续数据，这又会产生一个问题。例如在 Word 中，微软使用不灵活的单击 - 等待 -
    单击操作来拖动大块文本。你必须以单击和拖动来选择一个文本段，然后等待一秒钟左右，并</p>

<p>1 译注：实际上就是“移动位置”的意思。</p>

<p>2 译注：这个问题，即上面讲的“单击-拖动”动作不能再用于其他的目的。在下一段中有详细解释，请 继续阅读。</p>

<blockquote>
    405<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>再次单击和拖动来移动文本段，令人遗憾。可是，对于连续选择这种操作，确实又很难找到替 代它的好方法。如果微软愿意去掉扩展选择操作的元键习惯用法，那些元键就能用于选择句子，
    并能在一次移动中拖动它。但这仍然不能解决选择和移动任意文本段的问题。</p>

<p>当调整位置时，元键（例如 Shift 键）常常被用来限制在一维（水平或者垂直方向）上拖动。 这种类型的拖动叫作约束拖动 （constrained drag) 。约束拖动在绘图软件中极其有用，尤其是绘
    制较为简单的组织图时。拖动开始时的最初 5 到 10 个像素决定了拖动的角度。例如，当某一个 使用者的拖动开始于水平方向时，那么之后的拖动就将一直沿着水平方向。有些应用对约束拖
    动的处理有些不同，在拖动的过程中，如果使用者拖动鼠标偏离的角度超过一定阈值，则可以 允许按一定的角度拖动。</p>

<p>还有一种辅助使用者拖动的方式叫作网络（ guides) 。最常见的例子是 Adobe Illustrator ，其 中的网络是一些特殊的线，供使用者作为参考，在放置对象时调整位置。一般说来，使用者会
    告诉应用程序，当对象被拖至距离网络较近的位置时，应用程序会 “ 啪”的一下自动把对象放 置好并且和网络对齐。通常，如果用键盘缓慢移动，则网络不起作用。</p>

<p>在 OmniGraffie 的 Smart Guides 软件中，有一种较新的、很有用的网络的变体 <font size="2">。一</font> 般来说
    使用者基本上都喜欢对齐每个对象，而且也都喜欢在对齐的对象之间留下大小均匀的间隔。基 于这些前提 ，Smart Guides 提供了动态视觉反馈和对象定位辅助。 Google 的 SketchUp 软件则在</p>

<p>3D 空间上提供了类似的辅助功能（本章后面将详细讨论）。</p>

<p>调整大小和形状</p>

<p>在 GUI 中的各种窗口，调整大小和形状的功能没有什么不同。使用者可以拖曳窗口的右下 角来调整窗口的大小和长宽比，也可以拖曳窗口的边框来进行这个操作。一般来说，清晰的光 标暗示支持这样的交互。</p>

<p>这些习惯用法对于调整窗口大小来说是合适的，但当调整的对象是绘图或建模程序中的图 形元素时，必须要表达清楚哪个控件是被选中的，以及使用者在哪个位置上点击才能调整大小
    和形状，这很重要。用于调节图形对象大小的习惯用法在视觉上必须醒目，以将它自身与图画 的组成部分，尤其是它所控制的对象区分开来，并且必须考虑对象及其周围区域的视图。调节 控件本身一定要让调节大小的动作清晰明了，不能含糊晦涩。</p>

<p>有一种很受欢迎的习惯用法实现了这些目标，如图 18-23 所示，即调整大小的控制柄 (resizing handle, 或简称为控制柄）。控制柄还可以将选择标示出来，因此有着双重作用。这个双重作用
    是一种自然的共生关系，因为只有先选择对象，才能调整其大小。</p>

<p>使用者操作位于对象每边中点的控制柄时，只能移动它所处的那个边，对象的其他边并不</p>

<p>406<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>移动；操作角上的控制柄时，可以移动构成该角的两个边。这样的交互方式是很直观的。</p>

<p>控制柄会影响到它所包围对象的显示，因此它们不适合永久出现在对象的四周。所以，在 窗口上我们从来没有看见过控制柄。此时，边框或四角才更适合。如果被选对象比屏幕还大，
    控制柄会跑到屏幕的外面。这样使用者不仅无法直接操作它们，而且它们也起不到标示选择的 意义。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00169.jpg"/></p>

<p>图18-23所选对象有八个控制柄，每一个角上有一个，每个边的中点上有一个。控制柄在指示选择的同时，也是一个</p>

<p>便利调整对象大小和形状的习惯用法。控制柄有时通过像素反转颜色来实现，但这样在颜色多的时候可能会看不出来。</p>

<p>本图是微软的PowerPoint2010中的控制柄，这些控制柄占据了一些空间，可以让它们凸显出来。对于非矩形的对象，</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 可用一个能够包围它的矩形来显示控制柄.</p>

<p><br/>
    <br/></p>

<p>和拖动一样，这里也可以用元键约束、调整尺寸的方向，也是另一个约束拖动习惯用法的 好例子， Shift 再次用来强制保持调整对象的长宽比，这有时候会非常有用。在某些情况下，让
    尺寸调整保持在水平方向或垂直方向上，或者是长宽比不变，也可能有用。</p>

<p>必须注意的是，这里控制柄存在的前提是由它调控的对象是矩形，或者容易被矩形包围。 这对于用户创建一个组织系统图也许已经够了，调整更复杂的对象形状又会怎样呢？其实，还 有一种功能强大的控制柄变体：顶点控制柄 （vertex handle
    )。</p>

<p>许多软件在屏幕上画出的对象呈折线形（ polylines) 。折线是绘图程序的专用术语，专指由 一系列顶点定义的多段线条。如果最后的顶点与最初的顶点重合，它就是闭合的，也就形成了
    一个多边形。选中这样的对象时，程序不是像在矩形图那样设置 8 个操作点，而是在折线形的 每个顶点上设置一个操作点。用户可以分别拖动任意顶点，局部改变对象而不会在总体上影响 对象，如图 18-24 所示。</p>

<blockquote>
    407<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00313.jpg"/></p>

<p><br/>
    <br/></p>

<p><font size="2">图</font> 18-24 <font size="2">图中显示的就是顶点控制柄，之所以如此命名，是因为多边形的每个顶点上都有一个这样的控制柄。使用者</font></p>

<p><font size="2">可以单击并拖动任何控制柄调整多边形的形状，每次一段。这个习惯用法在绘图程序中很有用。</font></p>

<p>PowerPoint 中的任意边形对象也以折线方式绘制。如果单击这种不规则的图形，会出现带 有 8 个标准操作点的矩形外框；如果你随意右击图像，并在背景菜单中选择编辑顶点，这个矩
    形外框就会消失，取而代之的是顶点操作点。这两种习惯用法都很重要，前者用于按比例调整 图像的大小，后者用于精细调节图像形状。</p>

<p>如果对象具有弯曲的边缘，而不是多边形那样的直线边，最好的变形机制就是采用贝塞尔 控制柄（ B6zierhandle) 。和折线上的定点类似，它也表示对象上的点，不过表示的是曲线上的
    点。要想操作好贝塞尔曲线还是需要一定技巧和熟练程度的，所以更适合专业的作图和建模应 用软件。</p>

<p>连接</p>

<p>在某些应用程序中，一种功能强大的直接操作习惯用法是连接（ connection )。用户从一个 对象单击拖动至另一个对象，不是为了叠加二者，而是为了将两者用一条连线或者箭头连接。</p>

<p>用过项目管理或组织结构图应用软件的人肯定熟悉这个习惯用法。例如，在项目经理的网 络图（通常称为 PERT 图）中，将一个任务框与另一个任务框连接起来，在这种情况下，连接
    的方向很重要：鼠标键按下点处的任务是源任务，鼠标键释放点处的任务是目标任务。</p>

<p>当拖动两个对象之间的连接时，它以橡皮筋（ rubber-banding) 的形式提供视觉反馈：箭头 成为一条从鼠标按下点延伸到光标所在位置的线。线条是动画的，一端随光标移动，另一端停
    留在鼠标按下点。当用户移动光标通过要连接的候选对象时，光标暗示会提示这两个对象是可 以被连接的。用户在有效的目标上释放鼠标后，程序会在两个对象之间绘制一条永久的线或者</p>

<p>408<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>箭头。在某些应用程序中，这样也在逻辑上把两个对象连接在一起。和拖放操作一样，也要提 供一种方便的方式来取消这个操作，比如使用 Esc 键或者合击鼠标的双键。</p>

<p>连接本身也完全可以成为对象，具有调整大小的操作点和可以编辑的属性。这种实现方式 意味着连接可以进行独立的选择、移动和删除。在某些程序（如项目规划应用程序）中，对象 之间的连接需要包含一定的信息，因此在这种情况下，让连接成为 “
    一等公民 ” 很有意义。</p>

<p>连接不像其他习惯用法那样需要光标暗示，因为橡皮筋线的作用清晰可见。但是在对象存 在逻辑联系的应用中，就有必要显示出箭头当前指向的哪一个对象是有效的目标对象了。换句
    话说，如果用户拖动一个箭头，在它还没有指向屏幕上某个图标或小部件之前，他如何才能辨 别这个图标或小部件是否能合法连接？答案就是采用某些主动视觉暗示来显示潜在的目标对
    象；可以非常微弱，甚至当程序中所有对象对于任意连接都是有效目标时，可以完全没有；当 连接拖动经过目标对象时，目标对象应该高亮显示，表示愿意接受连接。</p>

<p><span id="filepos0002136397"></span></p>

<p align="right" height="1em" width="0pt">3D 对象操作</p>

<p>对于只装备了二维（ 2D) 输入设备和显示器的用户来说，精准地处理三维（ 3D )对象无疑 对交互提出了重大挑战。多年来，用户界面设计领域有不少相关的有趣研究，试图幵发出更有 效的适合 3D
    输入和控制的交互方式，但迄今为止仍然没有真正的突破，只是将 2D 习惯用法演 化扩展到了 3D 世界。</p>

<p>多数 3D 应用程序与精确绘图（如建筑 CAD) 或 3D 动画有关。创建模型的时候，动画出 现的问题与绘图时出现的问题相似，使模型随时间发生移动和改变增加了新的复杂性。动画家
    常在专门的应用程序中创建模型，再将这些模型加载到不同的动画工具中。</p>

<p>对 3D 操作习惯用法更深入的讨论，可能需要整章甚至整卷书的篇幅来描述，因此我们这 里只简单地介绍 3D 操作的一般性问题。</p>

<p>显示问题和习惯用法</p>

<p>2D 屏幕不具备视差，无法呈现深度。这或许是在 2D 屏幕上实现 3D 交互所面临的最重要 的问题。设计师们没有求助于昂贵而神秘的眼镜外围设备，而是用一些技巧来解决这些问题。
    另一个重要的问题则是，近距离的对象挡住了远距离的对象。这些导航问题，以及我们将在下 节中讨论的输入问题，可能就是虚拟现实 （virtual reality )还没有成为未来图形用户界面的主要</p>

<p align="right" height="0pt" width="0pt">原因。</p>

<p align="right" height="4em" width="0pt">409</p>

<p>多重视点</p>

<p>多重视点 （multiple viewpoint) ，可能是解决以上两个问题最古老的方法。但从交互的观点 来说，多重视点在很多方面的效果是最差的。虽然如此，多数 3D 模型应用程序在屏幕上设置
    了多重视点，每个视点从不同的角度显示同一对象或情景。通常，多重视点包括了俯视图、正 视图和侧视图，每个视图与绝对轴对齐，每个轴都可以向内或向外缩放。大多数情况下，还会
    有第四个视图，情景的正交投影或透视投影，用户可以调节每个视图的确切参数。可是，当每 个视图都有单独的窗口，并且每个窗口都有自己的外边框和控件时，这个习惯用法就变得非常
    麻烦：窗口不可避免地相互重叠、彼此影响，有限的屏幕被重复的控件和窗口边框浪费。一个 较好的解决方法是启用多窗格窗口，每个窗口中允许配置一个，二个，三个或者四个窗格（在 三个窗格的配置中有一个大窗格和两个较小的窗格 )
    。使用工具条或者键盘快捷键，能尽可能地 确保一次单击就能配置这些视图。</p>

<p>多重视点的缺点在于，用户需要同时观看多个地方才能知道对象的位置，结果迫使用户在 复杂的情景中从上向下、从侧面和前面各个角度定位对象。在大脑中实时进行三角测绘实在不
    容易，即使对于建模专家也是勉为其难的。不过，多重视点对沿特定轴线精确对齐对象还是有 帮助的。</p>

<p>基线网格、景深效果、阴影和标杆</p>

<p>基线网格 （baseline grid )、景深效果（ depthcueing )、阴影（ shadow) 和标杆（ pole) 是用 于解决多重视点问题的习惯用法，它们背后的理念是允许用户在正交或透视投影视图中了解 3D
    情景中对象的位置和运动。</p>

<p>基线网格提供了一个带有虚拟地板和墙壁的场景，每个轴一个，有助于用户定位方向。当 摄像机视点能自由旋转时（通常情况也是如此 ) ，基线网格特别有用。</p>

<p>借助景深效果，视野较深的对象显得暗淡。这种效果的影响通常是连续的，所以只要给出 了对象大小、形状和范围的有用线索，即使单个对象也能显示景深效果。当在格线上使用景深 效果时，有助于明确视图中格线的方向。</p>

<p>一些 3D 应用软件釆用阴影来定位，将所选对象的轮廓投影到网格上，就好像光线垂直照 射在每个网格上。当用户在 3D 空间中移动对象时，可以借助这些阴影或轮廓跟踪在每个维度 上是移动对象（或改变对象大小）的路线。</p>

<p>阴影的效果不错，但阴影和网格在视觉上会互相影响。我们可以使用单层底板网格 （floor grid) 和标杆来解决这个问题。标杆常与水平方向的网格一起发挥作用。当用户选择了一个对
    象，从对象的中心有一条垂直线扩展到网格。当移动对象时，标杆跟随移动而且始终与水平网</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>格垂直。用户可以通过观察标杆在格线 Gc 轴和 :^ 轴）表面移动的出发点，以及标杆相对于网 格（ z 轴）的距离和方位，来了解她在 3D 空间中移动对象的位置。</p>

<p>准线和其他的丰富视觉暗示</p>

<p>前面一节描述的习惯用法全部是丰富的非模态视觉反馈的例子，我们在第 15 章做过详细讨 论。但是，对于某些应用程序，过多的网格和标杆则具有破坏性。例如 <font size="2">，</font> Google 的 SketchUp
    是一个建筑绘图程序，当用户使用这一程序设计草图时，可以使用卷尺和量角器工具绘制自己 的草图线条，也可以用色彩编码提示在恰当的轴上正确定向，还可以启用蓝色梯度的天空和地 面颜色来帮助定向。因为该应用软件关注的是建筑设计，不是通常意义的
    3D 建模或动画，所 以设计师努力实现一个既简洁、功能强大又易学易用的简单界面（如图 18-25 所示)。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00142.jpg"/></p>

<p>O ® O C&amp; Mc(, Shift to ntcnd Drag mouit to s«itct rmiluple.</p>

<p>图18-25 Google的SketchUp软件是应用软件中的精品，集成了强大的3D建筑设计功能、流畅的交互、丰富的反馈、 可管理的设计工具。使用者可以根据位置、方向、季节以及一天中的时间设置天空的颜色和现实世界里的阴影。这不仅
    有助于表达，而且可以帮助使用者在创建时更好地定位。使用者也可以布置3D网格和度量准线，就像是在使用2D绘 图工具一样。摄像机旋转和缩放功能巧妙地被映射到鼠标的滚轮上，这样在使用其他工具时可以方便地使用这些功能，
    还提供了协助画线和对象对齐的文本提示。</p>

<p><br/>
    <br/></p>

<p>线框和边框</p>

<p>线框（ wireframe) 和边框 （bounding box) 解决了对象可视化问题。在处理器速度非常缓</p>

<blockquote>
    411
</blockquote>
<p>慢的年代，因为计算机速度不够快，不能实时绘制实心的外观。那时候，建模应用软件通常只 会粗糙地渲染出所选对象的表面，而用线框来表现其他所有的未选对象。透明化也起到一定的
    作用，但它仍然有很高的计算强度。在高度复杂的情景下，非选择对象只要渲染出边框就可以 了，虽然不完美，但已经基本可以满足要求了。</p>

<p>输入问题和习惯用法</p>

<p>3D 应用程序直接采用了许多 2D 应用的习惯用法，例如，拖动操作点和顶点操作点。不过 , 3D 输入还存在一些特殊的问题。</p>

<p>拖动阈值</p>

<p>3D 场面的 2D 投影中，使用直接操作的基本问题之一，是如何将屏幕上光标的 2D 移动， 转换为虚拟 3D 空间内更具 3D 意义的移动。</p>

<p>在 3D 投影中，不同种类的拖动域需要区分三个轴，而不是两个轴上的移动。比方说，鼠 标上下移动变换成沿一个轴向上的移动，而 45° 角的拖动常用于表示另一个轴上的运动。当用 户沿特定轴平行拖动时， SketchUp
    用虚线的形式提供色彩编码提示，同时也采用工具提示来暗 示。在 3D 环境中，以光标和其他类型的暗示来显示丰富的视觉反馈是非常必要的。</p>

<p>选取问题</p>

<p>3D 操作的另一个重要问题是选取问题 （picking problem) 。因为在组合情景时，对象要么 在线框里，要么透明，这样当用户的鼠标经过许多重叠的项目时，软件很难知道选择的究竟是
    哪一个项目。突出显示位置有一定的帮助，但还不够，因为对象有可能被其他对象完全遮盖。 成组选择就更难处理了。</p>

<p>许多 3D 应用程序求助于不那么直接的技术，如对象列表或对象层次关系，用户可以在 3D 视图外从这些列表或关系中选择对象。尽管这种交互有用，但还有更直接的方法。</p>

<p>显然，我们可以让用户在键盘上输入要选取对象的名字或者干脆语音输入对象的名字。如 果此时的场景中只有一个立方体，则系统很容易理解来自键盘或语音输入的 “ 立方体”指的是 哪个对象。另一简单的办法是按照对象的属性来选取，例如 “
    选择那个绿色的东西”。如果嫌这 种叫唤对象名字的方式麻烦，用户还可以使用它们的 ID 。此外，既然绝大多数的 3D 操控都是 用鼠标来完成的，那么我们可以用鼠标触发一些模态。这个方法也不错，而且不用键盘或语音，
    直接用鼠标操作就可以了。</p>

<p>例如，当掠过画面的某一部分时，可以打开一个类似菜单的工具提示，让用户选择一个或 多个重叠的对象（这种菜单对于只有单个清晰对象这种简单情况来说是不需要的）。所有可以单</p>

<p>412<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>独选择的平面、顶点或边，在鼠标经过时都应该有受范性提示。</p>

<p>此外，还有一种平稳简单的情景导航方式有助于改善选取，虽然它不能直接解决问题。但 是， SketchUp 将缩放和环绕功能都映射到鼠标的滚轮上。滚动鼠标滚轮可以围绕 3D 空间的中
    心零点进行缩放；按住滚轮可以从任何你正在使用的工具转换成旋转模态。这种模态下允许图 像围绕任何方向的中心轴旋转。这种流畅的导航使操作建筑模型如同在手掌中旋转它一样轻而 易举。</p>

<p>对象旋转、摄像机移动、旋转和缩放</p>

<p>3D 应用本身还存在一个特殊问题，即在空间上能实现的操控到底有多少。我们可以在三条 轴上调整对象的位置、大小和形状。也可以在这三条轴上旋转。除了这些之外，我们还可以运
    用摄像机视点，让摄像机在适当位置旋转，或者围绕某个焦点旋转，也可以在三条轴上旋转。 最后，摄像机的视野还可以分别放大或者缩小。</p>

<p>这不仅意味着在 3D 应用程序中元键和快捷键的分配很关键，而且还存在另一个问题，即 使摄像机变换和对象变换之间的实际不同，但通过观察摄像机视点也很难分辨两者的差别。可
    以在显示屏的一角加入情景绝对视图的缩微图来解决这个问题。这个视图在需要时可以放大或 缩小，并且，为避免用户迷失在空间中，它提供了一个现实检查和整体导航的方法。（注意，这 种缩微图在导航大的 2D 图像时也很有用）。</p>

<blockquote>
    413
</blockquote>
<p>第 <font size="7">19</font> 章</p>

<blockquote>
    <font size="7">为</font> S <font size="7">动设备和其他设备而设计</font>
</blockquote>
<blockquote>
    2007 年 6 月，苹果发布了 iPhone ，也是那个时候，移动设备的用户体验 被永远地改变了。几乎一夜间，移动设备的定义发生了翻天覆地的变化。在 iPhone 出现以前，移动设备的用户体验，发生在一块小小的镶嵌式或滑盖式硬
    件键盘上，或是在不太敏感的、需要手写笔的单点触摸屏上，有时还发生在同 样难用的 D 型 5 向操作块 ® 上。
</blockquote>
<p align="right" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00126.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    iPhone 在如下几个方面，彻底取代了原来糟糕的用户体验：
</blockquote>
<blockquote>
    • 一块面积巨大的、高分辨率的多点触摸屏，一个专门为手指直接在屏 幕上操作的操作系统。
</blockquote>
<blockquote>
    • 一组里程碑式的手势习惯用法，相对易学和掌握。
</blockquote>
<blockquote>
    • 一组传感器，可以传递出周围环境的信息，包括位置、方向、明暗、 运动。这一切使得移动应用的智能程度提高了一大截〇
</blockquote>
<p>①译注：如图所示就是几种常见的 D 型 5 向操作块（ 5-way D-pad )。</p>

<p align="right" height="0pt" width="0pt">第 19 章为移动设备和其他设备而设计</p>

<p>大约一年多以后， Google 也推出了它自己的多点触摸移动操作系统 —— 安卓（ Android )。 它从竞争对手苹果的 i 〇 S 那里借鉴了很多手势和导航习惯用法。不过，它接下来用了几年的时
    间不断改进，才在美学和用户体验方面慢慢达到了 i 〇 S 的水平。可以说， Android 是移动时代 的 Windows ，它占据了智能手机的大部分市场份额。（具有讽刺意味的是，微软的 Windows Phone
    操作系统，很晚才加入到这场竞争中，它的市场份额非常低。）本书撰写之际，移动设备上的基 本用户体验，几乎在所有的 “ 智能 ” 手机平台上统一了。现在，市场上 90 %的智能手机都是很
    类似的，有着大大的支持多点触摸的屏幕，有着类似的习惯用法，内置着类似功能的各类传感 器，逐步转向 “ 扁平化 ” 视觉设计（例如 i 〇 S7 )。</p>

<p>而在 iPad 上，几乎同样的故事也在上演， iPad 重写了平板设备的故事。微软及其他开发商 曾不断尝试发布各式的平板设备，但均已失败或放弃告终。当然， iPhone 的成功确保了 iPad —
    经推出立即成功的地位（尽管当时桌面电脑行业的很多人并不看好 iPad )。</p>

<p>现在， iPad 、 Android 和微软的多点触摸平板的销量不断增加，严重侵蚀着低端笔记本电脑 的市场，这一趋势似乎并没有要停下来的意思。对于很多人来说，这样一种非常方便的计算设
    备，想用的时候按下开关就立即能用，关闭时可以立即保存上次的状态，在后台自己安静地进 行着软件的升级，从云端安装新的应用，完全不存在管理窗口的附加工作，并且允许直接的多
    点指尖输入，这一切的一切，都远远优于传统的桌面软件、优于传统的点指输入设备。了解到 这些以后，将来的桌面机和笔记本电脑将来会变成什么样子，我们不难想象。</p>

<p>本章的大部分篇幅，将介绍在设计手机和平板类的移动设备时的注意事项及其设计原则。 本章的后面，我们还将简要讨论一下其他设备平台的界面，包括公共信息台、公共设备、车载 设备的界面。</p>

<p><span id="filepos0002164183"></span></p>

<p><font size="6">剖析移动应用</font></p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00037.jpg" width="54"/></p>

<p>桌面应用多数都是独占式的，而移动应用相反，它们多数是暂态的（ transient ),这是由它 们的本质特点所决定的。顾名思义，移动应用是在移动中使用的软件，是高度情境驱动的（移
    动设备上的游戏可能是个例外，不过游戏软件的交互设计是个单独的话题），因此它们天生就是 暂态的，特别是手持的移动设备。不过，它们通常会占据整个屏幕，这一点会让人觉得它们一
    点也不像暂态。暂态，在这里说的是用户与应用交互的特点：短暂、临时、关注于特殊的任务。</p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">大多数移动应用是暂态的。</p>

<p align="right" height="0pt" width="0pt">415</p>

<p>移动应用是暂态的另外一个主要原因，和设备的物理外形大小因素有关。手机本来就不大， 它的屏幕还要支持多点触摸，还必须要很容易用手指操作，不能误触发其他交互。即便是平板 设备，虽然屏幕较手机大了一些，但还是用手指来操作。</p>

<p>这两个因素导致了移动屏幕上的信息和控制密度，与桌面屏幕上对话框的信息和控制密度 是差不多的，因此最好也把移动屏幕当做是暂态的来对待。尽管高分辨率显示技术对移动设备
    上的细致图像和较小文本确实有帮助，但考虑到可用性和可读性，我们仍无法在屏幕上布置过 多的对象，也要考虑对象之间的间隔。为解决高分辨率下的可读性的问题，缩放（ zooming )是 一种替代方法（参见第 12
    章）。可是，虽然这种技术实现起来并不难，但也无济于事，它给这 个问题又增加一层复杂和困惑，因为缩放本身就是有问题的，它在很多移动设备上也是一种在 APP 间导航的常见的（而且也是尴尬的）途径。</p>

<p><span id="filepos0002166967"></span></p>

<p>移动设备的外形大小</p>

<p>将移动应用看做暂时应用，一般是不会出问题的。虽然如此，我们也要注意移动设备的外 形大小对导航、布局、行为策略，以及样式的影响。</p>

<p>现代多点触摸移动设备，按照外形大小来分类，基本上有以下三大类：</p>

<blockquote>
    • 手持设备（ handheld), 即手机和媒体设备（诸如 iPod Touch 等）。这类设备的外形特 点是，具备 4 〜 6 英寸大小的 “ 高窄 ” 屏幕（长宽比一般来说都是 16 : 9 ),而且在使
    用时一般以竖直方向放置 （portrait orientation) 为主。
</blockquote>
<blockquote>
    • 平板（ tablet) 。这类设备的屏幕大多数是 9 〜 10 英寸的。（苹果的平板是 4 : 3 ,而谷歌 和微软的多数是 16 : 9) 。安卓和 Windows 平板，在设计上侧重于水平（ landscape )使
    用，而苹果的平板水平和竖直这两种方向都可以。
</blockquote>
<blockquote>
    • 小平板 (mini tablet) 。小平板的屏幕大约是 7 〜 8 英寸。和平板一样，苹果的小平板 (iPad mini) 的长宽比是 4: 3 ，而谷歌和微软的是 16: 9 。
</blockquote>
<p>下一节将讨论上述各类不同外形的移动设备的基本结构模式（ structurepattern )。在本章的 后面，以及第 21 章中，我们还将讨论其主要模块。</p>

<p><span id="filepos0002170615"></span></p>

<p>手持设备上的应用</p>

<p>移动触屏操作系统上的应用（ App) 几乎都采用了全屏的模式，可以充分利用有限的屏幕 面积，并杜绝了令人头疼的窗口管理问题，这值得称赞。不过，这个明智的决定要归功于手 持设备的先驱者们，包括了苹果的 Newton 以及 Palm
    公司的 PalmPilot 。虽然今天我们使用的</p>

<p align="right" height="0pt" width="0pt">第 19 章为移动设备和其他设备而设计</p>

<p>手持设备的屏幕分辨率，比过去粗糙的屏幕提高了数倍，但全屏模式依然在继续，而且依然 有效。</p>

<p>此外，今天的手持式设备继续沿用着多年前的基本设计模式，很多概念也和以前一样，比 如 UI 元素呈垂直堆叠放置，原来的列表、网格、栏、抽屉等概念依然在使用。当然，高性能、
    高分辨率的处理能力和多点触摸的能力，也带来了新的结构模式，例如轮显（ carousel )、泳道 (swimlane) 、卡片等，它们逐步成为流行的移动习惯用法。</p>

<p>堆叠</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00131.jpg"/></p>

<p><img align="baseline" alt="" height="231" src="../Images/Image00024.jpg" width="258"/></p>

<p>堆叠（ stack) 可能是在非游戏类移动应用上使用最多的一种主要模式，特别是在手持设备 上。智能手机和其他类似手持设备的屏幕绝大多数都是 “ 高窄型 ” 的，这种外形迫使内容或控
    件的显示呈列表型，图标和缩略图除外。堆叠是包含内容的垂直组织结构，通常以列表或网格 形式存在，顶端或底端通常会有一个控制导航或访问功能的条栏。多数 iOS 、安卓和 Windows Phone
    上的应用都遵循着这种最主流的模式，请看图 19-1 。</p>

<p>Andrew Zari«n</p>

<p>What The Tech «live 3pm £T W/ <font size="1">妙</font> Andr«wZ«r <font size="1">邮</font> &amp; Pad <font
        size="1">物</font> hurrott. Tune in and us gfqlive.tv ♦tech fpockast</p>

<p>Thomas Poppcigaard</p>

<p>i love the start button is back in</p>

<p>vs Servw 2 <font size="1">〇</font> 12«2 *b«tterUE ptc.hwnef.c <font size="1">〇</font> (nAlrL£$lMms <i>m</i></p>

<p>n</p>

<p>GFQ Podcast Networtc</p>

<blockquote>
    TH <font size="2">A</font> it W/
</blockquote>

<p>⑭®</p>

<p><font size="2">图</font> 19-1 <font size="2">一般的移动应用都运用了这种包含了内容、控件、导航元素的堆叠布局模式。</font></p>

<p>屏幕轮显</p>

<p>屏幕轮显 （screen carousels) 是另一种非常主流的交互模式，它特别适合多实例或多变体 的仪表盘（ dashboard) 式的内容显示，使用者可运用向左或向右的滑动 （swipe gesture )手势
    进行快速导航。这种模式最经典的例子是 iOS 上的天气预报应用，如图 19-2 所示。使用者可以 在布局完全相同的不同屏幕和卡片间滑动， iOS 天气预报中，用户在不同展示卡号或屏之间滑</p>

<blockquote>
    417
</blockquote>
<p>动即可将切换不同地理位置的天气。轮显几乎不需要再进一步的交互，更不需要像 “ 堆叠模式 ” 中那种深入导航。轮显可能有、也可能没有顶栏或底栏，不过通常在屏幕的下方都有一个页标 小部件 （page marker widget),
    用来标示当前页在轮显的位置。轮显通常并不提供循环显示，也 就是说滑到最左或最右端就不能继续滑动了。但有时如果循环可以让导航更加方便，则可以采 取循环方式。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00240.jpg"/></p>

<p>图19-2 iOS的天气预报APP采用了非常经典的轮显模式。你可以左右滑动屏幕切换不同地理位置的天气预报，从而 方便地用类似于仪表盘的视图查看。底栏中有一个位置标记小部件，显示着当前屏幕在序列中的位置。该应用中的轮显
    到达最末端时，无法继续滑动从头开始，这让导航有些难用，实际上它没有必要禁止循环滑动。</p>

<p><br/>
    <br/></p>

<p>方位和布局</p>

<p>大多数的现代移动设备都能够检测到屏幕的方位（垂直或水平），这意味着应用可以根据 屏幕的方位来动态地列出当前屏幕上的内容。不过，大多数的应用会保持垂直布局不变，即 使屏幕在物理方位上发生了旋转。对于列表式或网格式的内容浏览来说（本章中的
    “ 浏览控件 ” 一节会进一步讨论），保持垂直布局是有益的，因为使用者始终都是单手垂直握着手机进行操 作的。</p>

<p>对于拍照、摄像及媒体编辑类的应用，由于媒体内容本身可能是水平的，最好还是允许屏 幕自动旋转成水平的。在这类应用中，最好使用图标式的控件，这样它们便可以随着屏幕一起 转动，并极大降低因方位变化导致用户迷惑的可能（图 19-3)
    。不过，要多花点时间考虑图标 的设计，让用户能够快速识别图标所代表控件的意思。</p>

<p>418<br/>
    <br/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00190.jpg"/></p>

<p>在手持设备应用中，平板具备更大的 “ 屏幕不动产 ” ，而因为享有更大的呼吸空间 。iPad 上 4 : 3 的大屏幕，确保了它有足够的空间进行导航和功能控制。安卓和 Windows 平板的屏幕 和电影银幕一样，是 16: 9
    的，同样也具备很大的空间，可以舒服地管理屏幕上的内容。</p>

<p>第 19 章为移动设备和其他设备而设计</p>

<p><font color="#FFFFFF">♦ €&gt;0 []</font></p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00190.jpg"/></p>

<p><font size="2">图</font> 19-3 iOS <font size="2">上名为</font> “ <font size="2">慢速快门</font> ” <font size="2">（</font>
    SlowShutter) <font size="2">的拍照</font> APP, <font size="2">屏幕自动旋转设计得非常好，可以很平滑地从垂直变 成水平。相比之下，</font> i <font
            size="2">〇</font> S <font size="2">自带的</font> “ <font size="2">相机</font> ” <font size="2">应用虽然也可以旋转，但由于它使用了一个文本的滚动选择条，结果是，旋转
        之后的文本在屏幕水平时很难读。</font></p>

<p><span id="filepos0002183259"></span></p>

<p>平板应用</p>

<p>堆叠和索引窗格</p>

<p>和其他手持设备上的应用一样，平板应用主要也依赖于堆叠模式：垂直堆叠的主要内容， 以及一个或一个以上标签、导航、操作栏等。不过，既然平板拥有较大的 “ 屏幕不动产”，如果 有需要，就可以附加一个或多个辅助用的窗格（ pane)
    。通常来说，这个或这些附加的窗格是索 引窗格（参见第 18 章），用于列出条目，例如电子邮件收件箱或搜索结果；或者是主内容窗格 中的当前所选条目。这是对显示屏空间的极佳利用，因为这种设计无需更深层导航，使得用户
    可以轻松地导航并浏览一个长长的列表内容。</p>

<p>在附加的索引窗格（ indexpane) 里，还可以继续添加相关的导航和功能，将它们放置于窗 格的顶栏或底栏中。通常来说，索引窗格中的对象列表通常来自于多个源头，例如电子邮件（参 见图 19-4)
    。这时的导航便需要标签式操作或更深层的导航。我们在本章后面会详细讨论这些 细节。此外，索引窗格中常见的部件还包括搜索和筛选。</p>

<blockquote>
    419
</blockquote>
<p>在垂直屏显模式中，索引窗格通常是从按键调出，并覆盖住一部分主内容区域。当然，如 果索引窗格内的内容本身特别少，我们可以不去覆盖主内容区域，否则一定要覆盖主内容区域 ( 参见图 19-4),
    这样的导航和査看才显得舒服自然。当然，如果在垂直屏显中也能不覆盖，是 最好不过了，可以给用户以卓越的交互体验，不过这里的前提是，内容要足够短，窄窄的索引 窗格可以装得下。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00125.jpg"/></p>

<p>图194 iOS自带的邮件应用中的一个可导航的索引窗格.它列出了邮件文件夹和里面的内容。在垂直屏显时，用户按 下应用左导航栏中的一个按钮就可以调出该窗格，它会覆盖住一部分屏幕.取消该窗格后覆盖区域会复原。在水平屏显
    模式中，该窗格则永久地驻留在内容窗格的左侧。</p>

<p><br/>
    <br/></p>

<p>覆盖住一部分主区域的索引窗格，在垂直屏显旋转成水平模式后，会自动复原被覆盖住的 主区域，索引窗格也会驻留在屏幕上，紧挨着主内容窗格。</p>

<p>弹出控制窗格</p>

<p>平板设备的屏幕足够大，以至于在上面运用弹出面板（ pop-up panel) 而不会盖住整个屏幕， 而在手持设备上，如果要做同样的事情，则控制面板会盖住整个屏幕。弹出控制窗格，如果运
    用得当，可极大地提升任务流的效率，因为它保留了背景屏幕的内容，让用户感觉到他们并没 有离开这个 “ 房间 ” （关于窗口或屏幕的房间比喻，参见第 18 章）。</p>

<p>弹出窗格和对话框是不一样的。区别在于弹出窗格是附着在某个特定的控件或内容对象上 的，通常用来改变和该控件或对象有关联的属性。这个 “ 关联 ” 或 “ 附着”，一般会通过一个带
    有三角凸起的气球来表示，该三角凸起会指向被关联的控件或对象，如图 19-5 所示。</p>

<p>420</p>
</body>
</html>
